美文网首页
javascript

javascript

作者: 葡萄柚子茶 | 来源:发表于2018-09-25 21:07 被阅读0次

    JavaScript = ECMAScript + BOM +DOM
    BOM-浏览器对象模型-window
    DOM-文档对象模型-document

    1.JavaScript Date 对象

    Date对象用于处理时间和日期
    通过 new Date() 创建Date对象
    例:页面显示时间

    CSS
    <style type="text/css">
                #time{
                    float: right;
                    background-color: blue;
                    color: yellow;
                    width: 320px;
                    height: 40px;
                    font: 20px;
                    text-align: center;
                    line-height: 40px;
                    
                    
                }
            </style>
    
    <body>
            <div id="time">
                <script type="text/javascript">
                    var days = ["日","一","二","三","四","五","六"]
                    function showTime(){
                        var now = new Date();
                        var year = now.getFullYear();
                        var month = now.getMonth() + 1;
                        var date = now.getDate();
                        var hour = now.getHours();
                        var minute = now.getMinutes();
                        var second = now.getSeconds();
                        var day = now.getDay();
                        var div = document.getElementById("time");
                        div.innerHTML = year + "年"
                        +(month <10 ? "0":"")+ month +"月"
                        +(date <10 ? "0":"")+ date +"日&nbsp;&nbsp;"
                        +(hour < 10 ? "0":"")+ hour +":"
                        +(minute < 10 ? "0":"")+ minute +":"
                        +(second < 10 ? "0":"")+ second 
                        +"&nbsp;&nbsp;星期"+days[day];
                    }
                    showTime();
                    window.setInterval(showTime,1000);
                </script>
            </div>
        </body>
    
    image.png

    2.JavaScript Math(算数) 对象

    Math(算数)对象的作用是:执行常见的算数任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
    Math.random()---返回 0 到 1 之间的随机数

    <body>
            <p id="a" ></p>
            <button onclick="creatNumber()" >点我</button>
            <script type="text/javascript">
                function creatNumber(){
                    var number =  Math.random()
                    var content = document.getElementById("a")
                    content.textContent = number
                }
                            
            </script>
            
        </body>
    
    parseInt(Math.random()*100+1)
    #产生1-100随机整数
    

    层叠的样式如何抉择?
    遵循三条原则:
    1.就近原则
    2.具体性原则(ID>类>标签[]>标签>通配符)
    3.重要性原则

    #显示九九乘法表
    <button onclick="showTable()">显示九九乘法表</button>
            <script>
                function showTable(){
                    document.write('<table style="border-collapse: collapse;" >');
                    for(var i = 1;i <= 9; i +=1){
                         document.write('<tr>');
                        for(var j = 1;j <= i; j +=1) {
                            document.write("<td style='border: 1px solid black;'>");
                            document.write(i+'*' +j +'='+ i*j);
                            document.write('</td>');
                            
                        }
                        
                        document.write('</tr>');
                    }   
                    document.write('</table>');
                }
    
    </script>
    
    
    

    3.HTML DOM Document 对象

    在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点

    (1)document.querySelectorAll(".foo")[0];
    是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表

    (2)document.querySelector(".foo");
    返回文档中匹配指定的CSS选择器的第一元素

    (3)document.getElementsByTagName("h1")[0];
    返回带有指定标签名的对象集合。

    (4)document.getElementsByClassName("foo");
    返回文档中所有指定类名的元素集合,作为 NodeList 对象。

    (5)document.getElementById("welcome")
    返回对拥有指定 id 的第一个对象的引用。

    推荐使用(1)和(2)
    document.getElementById 拿到标签
    Elements 很多标签是一个列表 用下标取到想要的元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                h1{
                    font-size: 20px;
                    color: black;
                    background-color: antiquewhite;
                    width: 960px;
                    margin: 0 auto;
                }
            </style>
        </head>
        <body>
        <h1 id="welcome" class="foo">欢迎来到千峰教育成都校区Python就业班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
        
            <script type="text/javascript">
                //var h1 = document.querySelectorAll(".foo")[0];
                //var h1 = document.querySelector(".foo");
                //var h1 = document.getElementsByTagName("h1")[0];
                //var h1 = document.getElementsByClassName("foo");
                var h1 = document.getElementById("welcome")
                function move(){
                    var str = h1.textContent;
                    str = str.substring(1)+str.charAt(0);
                                    substring 取子串
                    h1.textContent = str;
                    
                }
                window.setInterval(move,200);
            </script>           
            </div>
            
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:javascript

          本文链接:https://www.haomeiwen.com/subject/nxxroftx.html