利用JavaScript實現簡單的網頁時鐘

2022-02-25 10:00:26

一、效果展示

二、使用的技術

主要使用了js的日期物件,實現的時候先建立一個日期物件，並進行網頁佈局,對時間獲取之後將時間填入對應的標籤內。然後使用多執行緒實現時鐘的變動。

三、日期物件

1.指定時間

程式碼如下：

<script>
      //建立日期物件
       d=new Date();
       //設定年月日
      d.setFullYear(1982,03,28);
      //建立一個陣列
      var week=new Array(7);
      week[0]="週一";
      week[1]="週二";
      week[2]="週三";
      week[3]="週四";
      week[4]="週五";
      week[5]="週六";
      week[6]="周天";
      //將日期插入標籤內
      function data(){
          // 獲取年份
          document.getElementById("demo").innerHTML=d.getFullYear();
          // 獲取從1970年1月1日至今的毫秒數
          document.getElementById("demo1").innerHTML=d.getTime();
          // 將當日的日期轉換成字串
          document.getElementById("demo2").innerHTML=d.toUTCString();
          // 獲取當前周幾
          document.getElementById("demo3").innerHTML=week[d.getDay()-1];
          // 獲取具體時間
          document.getElementById("demo4").innerHTML=d;
          x=document.getElementById("demo5"); 
      }
</script>

2.獲取目前時間

程式碼如下：

<script>
   var today=new Date();
   var h=today.getHours();
   var m=today.getMinutes();
   var s=today.getSeconds();
</script>

三、原始碼

<!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>Document</title>
    <!-- 
        如何使用 Date() 方法獲得當日的日期。
        getFullYear()
        使用 getFullYear() 獲取年份。

        getTime()
        getTime() 返回從 1970 年 1 月 1 日至今的毫秒數。

        setFullYear()
        如何使用 setFullYear() 設定具體的日期。

        toUTCString()
        如何使用 toUTCString() 將當日的日期（根據 UTC）轉換為字串。

        getDay()
        如何使用 getDay() 和陣列來顯示星期，而不僅僅是數位。

        Display a clock
        如何在網頁上顯示一個鐘錶。
     -->
     <style>
         .nav{
             display: inline-block;
             width: 100%;
             height: 900px;
             background-color: aqua;
             color: brown;
             font-size: 400px;
             font-weight: 700;
             line-height: 900px;
             text-align: center;
         }
     </style>
</head>
//οnlοad=startTime()是body頁面載入完成後執行startTime函數
<body onload="startTime()">
    <script>
        d=new Date();
        d.setFullYear(1982,03,28);
        var week=new Array(7);
        week[0]="週一";
        week[1]="週二";
        week[2]="週三";
        week[3]="週四";
        week[4]="週五";
        week[5]="週六";
        week[6]="周天";
        function data(){
            // 獲取年份
            document.getElementById("demo").innerHTML=d.getFullYear();
            // 獲取從1970年1月1日至今的毫秒數
            document.getElementById("demo1").innerHTML=d.getTime();
            // 將當日的日期轉換成字串
            document.getElementById("demo2").innerHTML=d.toUTCString();
            // 獲取當前周幾
            document.getElementById("demo3").innerHTML=week[d.getDay()-1];
            // 獲取具體時間
            document.getElementById("demo4").innerHTML=d;
            x=document.getElementById("demo5"); 
        }
        function startTime(){
            var today=new Date();
            var h=today.getHours();
            var m=today.getMinutes();
            var s=today.getSeconds();
            // 在小於10的數位前加一個‘0'
            m=checkTime(m);
            s=checkTime(s);
            document.getElementById('demo5').innerHTML=h+":"+m+":"+s;
            //開啟一個多執行緒,開啟後本執行緒會繼續執行。
            t=setTimeout(function(){startTime()},500);
            console.log("hello")
            console.log(s)
            return    
        }
        function checkTime(i){
            if (i<10){
                i="0" + i;
            }
            return i;
        }
    </script>

    <div class="nav" id="demo5"></div><br>    
    <div id="demo">1</div>
    <div id="demo1">2</div>
    <div id="demo2">3</div>
    <div id="demo3">4</div>
    <div id="demo4">5</div>
    <input type="button" onclick="data()" value="點我">
    
</body>
</html>

總結：

網頁時鐘主要考驗我們對日期函數,多執行緒的掌握情況。知識點都在註釋內,請大家多多閱讀原始碼。以求深入理解。

到此這篇關於利用JavaScript實現簡單的網頁時鐘的文章就介紹到這了,更多相關JavaScript網頁時鐘內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！