JS实现时钟。

最新推荐文章于 2024-03-17 21:49:26 发布

Can1997

最新推荐文章于 2024-03-17 21:49:26 发布

阅读量1.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Can1997/article/details/124137195

版权

此处CSS的样式忽略。

HTML简单结构如下:

JS简单代码如下：

<body>
    <div id="clock">
        <p id="hours"></p>
        <span>:</span>
        <p id="min"></p>
        <span>:</span>
        <p id="sec"></p>
    </div>
    <script>
        //获取页面元素
        var hours = document.getElementById("hours");
        var min = document.getElementById("min");
        var sec = document.getElementById("sec");

        //时间函数处理
        function clock(){
            //创建时间对象
            var date = new Date();
            //获取当前小时
            hours.innerHTML = date.getHours();
            hours.innerHTML.length ===1?hours.innerHTML='0'+hours.innerHTML:'';
            //获取当前分钟
            min.innerHTML = date.getMinutes();
            min.innerHTML.length ===1?min.innerHTML='0'+min.innerHTML:'';
            //获取当前秒钟
            sec.innerHTML = date.getSeconds();
            sec.innerHTML.length ===1?sec.innerHTML='0'+sec.innerHTML:'';
        
            }
        clock();
        setInterval(clock,500);

    </script>
</body>