day6 javascript

weixin_34253539發表於2018-09-25
JavaScript

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>
13692200-b83ae0e08a540726.png
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>

相關文章