利用JS BOM制作简易时钟

最新推荐文章于 2024-02-27 00:34:05 发布

A_hapiness

最新推荐文章于 2024-02-27 00:34:05 发布

阅读量431

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/A_hapiness/article/details/120070834

版权

用到的知识点：

1.BOM

2.DOM

3.间隔定时器

4.date对象

HTML和CSS代码段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            width: 140px;
            height: 55px;
            background-color: blue;
            border-radius: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -25px;
        }

        .time,
        .year {
            height: 25px;
            line-height: 25px;
            text-align: center;
            color:pink;
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="time"></div>
        <div class="year"></div>
    </div>

JS代码

   <script>
        //  获取事件源  这里电子时钟的事件源为claa类名为time和year的两个div
        var time = document.getElementsByClassName('time')
        var year = document.getElementsByClassName('year')



        //时间类型
        //  设置一个间隔定时器让获取系统时间的代码 让里面的代码每间隔一秒就运行一次
        setInterval(function () {
            // 获取当前系统时间
            var date = new Date();

            //  获取当前系统年份
            var year1 = date.getFullYear();
            // year1 = year1 > 10 ? year1 : "0" + year1;
            //获取当前系统月份  注意获取的月份值需要加1 原因自行百度
            var month = date.getMonth() + 1;
            month = month > 10 ? month : "0" + month;
            //获取当前系统日期  
            var date1 = date.getDate();
            date1 = date1 > 10 ? date1 : "0" + date1;
            //定义一个变量用于拼接系统年份
            var riqi  = year1 + '年' + month + "月" + date1 + "日"
            //   在控制台输出该变量检查上述代码是否有错误
            console.log(riqi)


            //  获取当前小时
            var h = date.getHours();
            h = h > 9 ? h : "0" + h;
            //  获取当前分钟
            var m = date.getMinutes();
            m = m > 9 ? m : "0" + m;
            //  获取当前系统秒数
            var s = date.getSeconds()
            s = s > 9 ? s : "0" + s;

            //   定义一个变量sj用来拼接当前的系统时间
            var sj = h + ':' + m + ":" + s;
            //   同理在控制台打印出当前系统时间看代码是否正确
            console.log(sj)




            //将变量sj的值赋值给类名为time和year的div 
            time[0].innerHTML = `${sj}`
            year[0].innerHTML =`${riqi}`
        }, 1000)
    </script>
</body>

</html>

A_hapiness

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用JS BOM制作简易时钟

用到的知识点： 1.BOM 2.DOM 3.间隔定时器 4.date对象HTML和CSS代码段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
复制链接

扫一扫