用定时器写时钟

最新推荐文章于 2024-08-26 18:02:18 发布

原创最新推荐文章于 2024-08-26 18:02:18 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

在页面中可以看到用定时器来写的那些小时钟，今天我们就来简单的实现一下这样的小功能：

实现时钟需要注意到的是：

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>

正在学习阶段，有很多值得学习的地方，如有不足，请指出。