1. 程式人生 > >用定時器寫時鐘

用定時器寫時鐘

在頁面中可以看到用定時器來寫的那些小時鐘,今天我們就來簡單的實現一下這樣的小功能:

實現時鐘需要注意到的 是:

1.在獲取月份的時候要注意到,getMonth方法是從0開始的,使用的時候要注意的是要加一。

2.用getDay的時候,注意星期日是0,使用的時候要注意。

3.使用定時器的時候要注意要清掉定時器再用。

下面是完整程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定時器</title>
</head>
<body>
    <script>
        onload = function (){
            var timer = null;
            var a = new Date();//獲取當前時間

            var year = a.getFullYear();
            var mou = getZero(a.getMonth()+1);//月需要注意,是從0開始
            var day = getZero(a.getDate());
            var week = a.getDay();//星期也要注意,星期日是0;

            var hour = getZero(a.getHours());
            var min = getZero(a.getMinutes());
            var sec = getZero(a.getSeconds());

            function getZero(num){
               if(num<10 && num>=0){
                   return '0'+num;
               }else{
                   return num;
                   
               }
            }//用於寫前面的0;
            
            function getDat(week){
                switch(week){
                    case 1:
                    week ='一';
                    break;
                    case 2:
                    week ='二';
                    break;
                    case 3:
                    week = '三';
                    break;
                    case 4:
                    week = '四';
                    break;
                    case 5:
                    week = '五';
                    case 6:
                    week = '六';
                    break;
                    case 0:
                    week = '七';
                    break;
                }
                return day;
            }//這是處理星期日的問題的,星期日會出現0;
            
            clearInterval(timer);
            timer = setInterval(function (){
            var a = new Date();//獲取當前時間

            var year = a.getFullYear();
            var mou = getZero(a.getMonth()+1);//月需要注意,是從0開始
            var day = getZero(a.getDate());
            var week = a.getDay();//星期也要注意,星期日是0;

            var hour = getZero(a.getHours());
            var min = getZero(a.getMinutes());
            var sec = getZero(a.getSeconds());

             seo.innerHTML='現在的時間是:'+year+'年'+mou+'月'+day+'號'+','+'星期'+week+
            ','+hour+'時'+min+'分'+sec+'秒';
            },1000);
           
        }
    </script>
    <div id="seo"></div>
    <input type="button" value="開始">
    <input type="button" name="" id="" value="暫停">
</body>
</html>

正在學習階段,有很多值得學習的地方,如有不足,請指出。