十二、深入JavaScript中的Date

@Author:Runsen
@Date:2020/05/29

作者介紹:Runsen目前大三下學期,專業化學工程與工藝,大學沉迷日語,Python, Java和一系列數據分析軟件。導致翹課嚴重,專業排名中下。.在大學60%的時間,都在CSDN。決定今天比昨天要更加努力。

今天介紹的是JavaScript中的Date,我先去W3C偷窺學習下。

Date

Date對象是 JavaScript原生的時間庫。它以1970年1月1日00:00:00作爲時間的零點,可以表示的時間範圍是前後各1億天(單位爲毫秒)。

Date對象的創建

Date對象的創建就是一個new命令,會返回一個Date對象的實例;如果不加參數,實例代表的就是當前時間。

var today = new Date();
console.log(today.toString()); 

Date用法

下面的代碼包含了Date日期對象所有用法

<body>
    <script>
        var data = new Date();
        // var strap = data.getTime();
        // alert(strap);
        var year = data.getFullYear();
        var mon = data.getMonth()+1;
        var date = data.getDate();
        var hour = data.getHours();
        var min = data.getMinutes();
        var sec = data.getSeconds();
        var day = data.getDay();
        document.body.innerHTML = year + "年" + mon + "月" + date + "日" + hour + "時" + min + "分" + sec + "秒" + "星期" + day;
    </script>
</body>

練習

實現時間的變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #aa8899;
            margin-bottom: 20px;
        }
        div p{
            font-size: 20px;
            color: #aa132b;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div id="box">
        敵軍還有<span id="time">30</span>秒到達戰場
    </div>
    <div id="wrap"></div>
    <script>
        var oBox = document.getElementById("box");
        var oWrap = document.getElementById("wrap");
        var oTime = document.getElementById("time");
        var timer;
        var num = 30;
        timer = setInterval(function () {
            num --;
            oTime.innerHTML = num;
            if(num === 0){
                clearInterval(timer);
                oBox.innerHTML = "<p>打死他</p>";
            }
        },1000);
        function change() {
            var data = new Date();
            var year = data.getFullYear();
            var mon = data.getMonth()+1;
            var date = data.getDate();
            var hour = data.getHours();
            var min = data.getMinutes();
            var sec = data.getSeconds();
            var day = data.getDay();
            hour = toTwo(hour);
            min = toTwo(min);
            sec = toTwo(sec);
            function toTwo(n) {
                if(n< 10){//0123456789
                    n ="0" + n;//00 01 ----09
                }
                return n;
            }
            oWrap.innerHTML = year + "年" + mon + "月" + date + "日" + hour + "時" + min + "分" + sec + "秒"+ "星期"+ day;
        }
        change();
        setInterval(change,1000);
    </script>
</body>
</html>


這些都是我2018學的,然後就是不斷地複習,我擦,5/30到了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章