时钟实例（html&&css）

最新推荐文章于 2024-08-01 16:15:33 发布

luffy9

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量490

点赞数 1

分类专栏： ------------Web大前端------------ javascript

本文链接：https://blog.csdn.net/qq_29606781/article/details/68928245

版权

------------Web大前端------------ 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

获取实时时间的时钟，用到了JS中的计时器和Date日期对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js内置对象</title>

</head>
<body οnlοad="startTime()">
    <script>
        function startTime(){
            var today = new Date();       //获取日期对象Date(),处理日期和事件
            var h = today.getHours();     //获取“时”
            var m = today.getMinutes();   //获取“分”
            var s = today.getSeconds();   //获取“秒”
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById("timetxt").innerHTML = h+ ":"+ m+ ":"+s; //将时间显示出来
            t = setTimeout(function(){
                startTime();
            },500);
        }
        function  checkTime(i){
            if(i<10){
                i = "0"+i;
            }
            return i;
        }
    </script>
    <div id="timetxt"></div>
</body>
</html>

解析: （1）时分秒一般都是两位，当他们<10时在各自前面补“0”即可如时间 18:09:26

函数checkTime()就是在检查时分秒是否是两位数

（2）希望时间一直在刷新

t = setTimeout(function(){
startTime();
},500);
创建一个方法，让它自己调用自己，递归调用，每隔500ms获取一次时间（也可以每隔1s=1000ms）;第一次在页面加载时调用<body οnlοad="startTime()">