JS-DOM程式設計-07-周期函式setlnterval

阿新 • • 發佈：2021-08-08

JS-DOM程式設計-07-周期函式setlnterval

1.獲取系統當前時間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期函式setlnterval</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            //獲取當前標準時間物件
            var nowtime1 = new Date();
            //預設格式
            // document.write(nowtime1);
            document.getElementById("timeDiv1").innerText = "預設格式：" + nowtime1;

            //本地化格式：
            var nowtime2 = nowtime1.toLocaleString();
            document.getElementById("timeDiv2").innerText = "本地化格式：" + nowtime2;

            //自定義格式
            //獲取當前標準時間物件
            var t = new Date();
            var year = t.getFullYear();//返回年資訊，以全格式返回
            var month = t.getMonth();//月份是0-11
            //var dayOfWeed = t.getDay();//獲取一週的第幾天(0-6)
            var day = t.getDate();//獲取日資訊
            var hour = t.getHours()//獲取時
            var minute = t.getMinutes()//獲取分
            var second = t.getSeconds()//獲取秒
            document.getElementById("timeDiv3").innerText = "自定義格式：" + 
            year + "年" + (month + 1) + "月" + day +  "日" 
            + hour + "時" + minute + "分" + second + "秒";

            //獲取格林尼治時間(從1970年1月1日 00:00:00 000到當前系統時間的總毫秒數)
            var gltime = t.getTime();//一般使用格林尼治時間當作時間戳(timestamp)
            document.getElementById("timeDiv4").innerText = "格林尼治時間：" + gltime;
            
        }ss
    </script>
    <div id="timeDiv1"></div>
    <div id="timeDiv2"></div>
    <div id="timeDiv3"></div>
    <div id="timeDiv4"></div>
</body>
</html>

按以上方法獲取到當前系統時間後，是靜態的，不會自動執行。

下面我們需要做到讓顯示在網頁上的時間自動走起來。

2.顯示網頁時鐘

自動計時：

周期函式setInterval()能按照指定的週期(以毫秒計)來呼叫函式或計算表示式。
在定義一個獲取當前系統時間的函式後，可以在使用周期函式setInterval按指定的週期呼叫該函式，如此便可實現自動計時的時鐘。

停止自動計時：

clearInterval()函式可取消setInterval()函式的執行。
setInterval()函式返回一個值，可以傳入clearInterval()函式中終止週期執行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期函式setlnterval</title>
</head>
<body>
    <script type="text/javascript">
        //點選按鈕顯示當前時間
        var displayTime = function() {
            var t2 = new Date();
            var strTime = t2.toLocaleString();
            document.getElementById("timeDiv5").innerText = strTime;
        }
        //自動定期獲取當前時間
        // setInterval()按照指定的週期(以毫秒計)來呼叫函式或計算表示式。 
        var startTime = function() {
            //setInterval()函式返回一個值，可以傳入clearInterval()函式中終止週期執行
            //不加var，定義為全域性引數
            stop = window.setInterval("displayTime()",1000);
        }
        //停止時間
        //clearInterval()函式可取消setInterval()函式的執行
        //clearInterval()函式的引數必須是setInterval()函式返回的值。
        var stopTime = function() {
            window.clearInterval(stop);
        }
    </script>
    <input type="button" id="btn1" value="點選開始時間" onclick="startTime();">
    <input type="button" id="btn2" value="砸瓦魯多，停止時間" onclick="stopTime();">
    <div id="timeDiv5"></div>
</body>
</html>