JavaScript实例 01: JavaScript实例

1.1 基础 JavaScript 实例

生成普通文本和标签

<body>
    <script type="text/javascript">
        document.write("<h1>Hello World!</h1>")
    </script>
</body>

页面还未显示前调用js

<body onload="message()">
    <h1>页面还未显示前调用js</h1>

    <script type="text/javascript">
    function message() {
        alert("该提示框是通过 onload 事件调用的。")
    }
    </script>
</body>

声明一个变量，为它赋值，然后显示出来

<body onload="message()">
    <p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>

    <script type="text/javascript">
        var firstname;
        firstname="George";
        document.write(firstname);
        document.write("<br />");
        firstname="John";
        document.write(firstname);
    </script>
</body>

检测浏览器的全部信息

<body>
    <script type="text/javascript">
        var x = navigator;
        document.write("CodeName=" + x.appCodeName);            // 代码：
        document.write("<br />");

        document.write("Name=" + x.appName);                     // 浏览器：
        document.write("<br />");

        document.write("Version=" + x.appVersion);              // 浏览器版本：
        document.write("<br />");

        document.write("CookieEnabled=" + x.cookieEnabled);    // 是否启用Cookies
        document.write("<br />");


        document.write("CPUClass=" + x.cpuClass);
        document.write("<br />");
        document.write("OnLine=" + x.onLine);
        document.write("<br />");
        document.write("Platform=" + x.platform);              // 平台：
        document.write("<br />");

        document.write("UA=" + x.userAgent);                    // 浏览器的用户代理报头
        document.write("<br />");

        document.write("BrowserLanguage=" + x.browserLanguage);
        document.write("<br />");
        document.write("SystemLanguage=" + x.systemLanguage);
        document.write("<br />");
        document.write("UserLanguage=" + x.userLanguage);

        /* 运行结果：
        CodeName=Mozilla
        MinorVersion=undefined
        Name=Netscape
        Version=5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
        CookieEnabled=true
        CPUClass=undefined
        OnLine=true
        Platform=Win32
        UA=Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
        BrowserLanguage=undefined
        SystemLanguage=undefined
        UserLanguage=undefined
        */
    </script>
</body>

根据浏览器类型提醒用户

<body onload="detectBrowser()">
    <script type="text/javascript">
        function detectBrowser() {
            var browser=navigator.appName;
            var b_version=navigator.appVersion;
            var version=parseFloat(b_version);
            if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
              {alert("您的浏览器够先进了！")}
            else
              {alert("是时候升级您的浏览器了！")}
        }
    </script>
</body>

1.2 JavaScript字符串操作

为字符串添加样式

<body>
    <script type="text/javascript">
        var txt="Hello World!";

        //1、字体变大、变小
        document.write("<p>Big: " + txt.big() + "</p>");
        document.write("<p>Small: " + txt.small() + "</p>");
        //2、载体加粗、变斜体
        document.write("<p>Bold: " + txt.bold() + "</p>");
        document.write("<p>Italic: " + txt.italics() + "</p>");
        //3、字体颜色、大小
        document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>");
        document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>");
        //4、字母大写、小写
        document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>");
        document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>");
        //5、字体添加a标签属性
        document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>");
        //6、字体放到上角、下角
        document.write("<p>Subscript: " + txt.sub() + "</p>");
        document.write("<p>Superscript: " + txt.sup() + "</p>");

        document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>");
        document.write("<p>Fixed: " + txt.fixed() + "</p>");
        document.write("<p>Strike: " + txt.strike() + "</p>");
    </script>
</body>

替换字符串中的字符 - replace()

<body>
    <script type="text/javascript">
        var str="Visit Microsoft!";
        document.write(str.replace(/Microsoft/,"W3School"))
    </script>
</body>

1.3 JavaScript Math（算数对象）实例

使用 round() 对数字进行舍入

<body>
    <script type="text/javascript">
        document.write(Math.round(0.60) + "<br />");     //结果：1
    </script>
</body>

使用 random() 来返回 0 到 1 之间的随机数

<script type="text/javascript">
        document.write(Math.random());   // 0.05979463347692282
    </script>

使用 max() 来返回两个给定的数中的较大的数

使用 min() 来返回两个给定的数中的较小的数

 <script type="text/javascript">
        document.write(Math.min(5,7) + "<br />");   // 运行结果：5
    </script>