JS实现电子时钟

最新推荐文章于 2023-12-09 11:08:42 发布

程序媛霉霉菌

最新推荐文章于 2023-12-09 11:08:42 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cjmxcc/article/details/109287830

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS实现电子时钟

本案例设及的JS知识点
时间函数，定时器，内置构造函数实例化对象的创建，字符串拼接，流程控制以及三元运算符，回调函数。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #iwatch {
            margin-top: 160px;
            font-size: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="iwatch">     
    </div>
    <script>
        (function(){
            // 获取id名是 iwatch 的 div 元素
            var iwatchBox = document.getElementById('iwatch');
            // 调用函数，实现日期时间初始化
            getDatetime();
            // 开启定时器(多次定时)实现时间动态更新
            setInterval(getDatetime, 1000);
            // 定义获取当前日期时间的函数
            function getDatetime() {
                // 创建 date 对象
                var date = new Date();
                // 获取年月日时分秒, 并对个位数前面补 0
                var y = date.getFullYear();
                var m = addZero(date.getMonth() + 1);
                var d = addZero(date.getDate());
                var h = addZero(date.getHours());
                var i = addZero(date.getMinutes());
                var s = addZero(date.getSeconds());
                // 拼接日期时间字符串
                var dateStr = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
                // 设置元素中的文本内容
                iwatchBox.innerHTML = dateStr; 
            }
            // 实现个位数前面补 0
            function addZero(n) {
                return n < 10 ? '0' + n : n;
            }
           //也可以使用if分支实现
           // 例如
            //if(d <10){
           // d='0'+d;
           // }
        })();
    </script>
</body>
</html>

程序媛霉霉菌

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS实现电子时钟

JS实现电子时钟本案例设及的JS知识点时间函数，定时器，内置构造函数实例化对象的创建，字符串拼接，流程控制以及三元运算符，回调函数。实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫