• 01: JavaScript实例


    1.1 基础 JavaScript 实例

    <body>
        <script type="text/javascript">
            document.write("<h1>Hello World!</h1>")
        </script>
    </body>
    生成普通文本和标签
    <body onload="message()">
        <h1>页面还未显示前调用js</h1>
    
        <script type="text/javascript">
        function message() {
            alert("该提示框是通过 onload 事件调用的。")
        }
        </script>
    </body>
    页面还未显示前调用js
    <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>
    为字符串添加样式
    <body>
        <script type="text/javascript">
            var str="Visit Microsoft!";
            document.write(str.replace(/Microsoft/,"W3School"))
        </script>
    </body>
    替换字符串中的字符 - replace()

    1.3 JavaScript Math(算数对象)实例

    <body>
        <script type="text/javascript">
            document.write(Math.round(0.60) + "<br />");     //结果:1
        </script>
    </body>
    使用 round() 对数字进行舍入
        <script type="text/javascript">
            document.write(Math.random());   // 0.05979463347692282
        </script>
    使用 random() 来返回 0 到 1 之间的随机数
        <script type="text/javascript">
            document.write(Math.max(5,7) + "<br />");   // 运行结果:7
        </script>
    使用 max() 来返回两个给定的数中的较大的数
        <script type="text/javascript">
            document.write(Math.min(5,7) + "<br />");   // 运行结果:5
        </script>
    使用 min() 来返回两个给定的数中的较小的数

     

  • 相关阅读:
    读书笔记——高效能人士的七个习惯3
    读书笔记——高效能人士的七个习惯2(四类优先级)
    读书笔记——高效能人士的七个习惯1
    任正非最新谈话:吉田社长
    罗辑思维CEO脱不花:关于工作和成长,这是我的121条具体建议
    不需注释的生命
    读书笔记:《尽管去做——无压工作的艺术》摘抄
    C语言中变量名及函数名的命名规则与驼峰命名法
    回车”(carriage return)和”换行”(line feed)的区别和来历-(附:ASCII表)
    printf输出格式总结
  • 原文地址:https://www.cnblogs.com/xiaonq/p/8084496.html
Copyright © 2020-2023  润新知