js玩转超酷时钟-一一网

这是我参与新手入门的第3篇文章

效果展示

素材图片

0.png
1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
colon.png
bg.png
title.png
year.png
month.png
week.png
one.png
two.png
three.png
four.png
five.png
six.png
seven.png

demo代码

html

<div id='container'>
        <!-- 标题 -->
        <div id='title'><img src="https://juejin.cn/post/images/title.png" ></div>
        <!-- 年月日 -->
        <div id='date'>
                <img class='imgs' src="https://juejin.cn/post/images/2.png" >
                <img class='imgs' src="https://juejin.cn/post/images/0.png" >
                <img class='imgs' src="https://juejin.cn/post/images/2.png" >
                <img class='imgs' src="https://juejin.cn/post/images/1.png" >
                <img src="https://juejin.cn/post/images/year.png" >
                <img class='imgs' src="https://juejin.cn/post/images/0.png" >
                <img class='imgs' src="https://juejin.cn/post/images/5.png" >
                <img src="https://juejin.cn/post/images/month.png" >
                <img class='imgs' src="https://juejin.cn/post/images/2.png" >
                <img class='imgs' src="https://juejin.cn/post/images/0.png" >
                <img src="https://juejin.cn/post/images/seven.png" >
        </div>
        <!-- 时分秒星期 -->
        <div id='time'>
                <img class='imgs' src="https://juejin.cn/post/images/1.png" >
                <img class='imgs' src="https://juejin.cn/post/images/3.png" >
                <img src="https://juejin.cn/post/images/colon.png" >
                <img class='imgs' src="https://juejin.cn/post/images/1.png" >
                <img class='imgs' src="https://juejin.cn/post/images/4.png" >
                <img src="https://juejin.cn/post/images/colon.png" >
                <img class='imgs' src="https://juejin.cn/post/images/0.png" >
                <img class='imgs' src="https://juejin.cn/post/images/0.png" >
                <img src="https://juejin.cn/post/images/week.png" >
                <img id='weeks' src="https://juejin.cn/post/images/four.png" >
        </div>
</div>
复制代码

css

* {
        margin: 0;
        padding: 0;
}

#container {
        width: 520px;
        height: 400px;
        background: url(./images/bg.png);
        text-align: center;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

#title {
        padding: 20px;
}

#date {
        padding-bottom: 10px;
}
复制代码

window.onload = function() {
        //js通过id或class获取对象
        var dateImgs = document.getElementById('date').getElementsByClassName('imgs'); //获取到年月日的数字图片对象
        var timeImgs = document.getElementById('time').getElementsByClassName('imgs'); //获取到时分秒的数字图片对象
        var weekImg = document.getElementById('weeks'); //获取到星期的图片对象
        // 时间函数
        function changeTime() {
                var date = new Date();//获取当前时间
                var y = date.getFullYear(); //获取年(完整的4位)
                var m = date.getMonth(); //获取当前月份(0-11,0代表1月)
                var d = date.getDate(); //获取当前日(1-31)
                var w = date.getDay(); //获取周(0-6,0代表星期天)
                var h = date.getHours(); //获取小时(0-23)
                var f = date.getMinutes(); //获取分钟(0-59)
                var s = date.getSeconds(); //获取秒钟(0-59)
                //检测数字位数,小于10的数字前面加个0
                function check(num) {
                        if (num < 10) {
                                num = '0' + num
                        }
                        return num
                };
                var strDate = '' + check(y) + check(m + 1) + check(d); //拼接获得日期字符串
                var strTime = '' + check(h) + check(f) + check(s); //拼接获得时间字符串
                var weekArr = ['./images/seven.png', './images/one.png', './images/two.png', './images/three.png',
                        './images/four.png', './images/five.png', './images/six.png',
                ]; //星期图片数组
                //循坏两组图片对象,拼接上0-9的数字图片显示
                for (var i = 0; i < dateImgs.length; i++) {
                        dateImgs[i].src = 'https://juejin.cn/post/images/' + strDate.charAt(i) + '.png';//年月日数字图片更换
                }
                for (var i = 0; i < timeImgs.length; i++) {
                        timeImgs[i].src = 'https://juejin.cn/post/images/' + strTime.charAt(i) + '.png';//时分秒数字图片更换
                }
                weekImg.src = weekArr[w];//星期图片更换
        };
        changeTime();
        //开启定时器
        setInterval(changeTime, 1000);
}
复制代码

代码讲解

html+css部分

页面结构主要分为标题、年月日和时分秒星期三部分,由于都是特殊的字体，所以全部使用图片来实现，图片尺寸都是设计好了的，也不需要特别去写一些css，只需调整好结构，就可以轻松实现页面布局啦！！！
当然，缺点就是图片素材太多，整起来也是有点麻烦,上面已经整理出来了，需要的可以自己去拿。
页面初始效果(选了个特别的时间，都看出来了吧，233……)

js部分

js代码注释已经写的很详细了，我们这里就来个总结吧！！！

1、原生js获取对象

getElementById()：返回对拥有指定 ID 的第一个对象的引用;
语法：document.getElementById(id)，注意id名称前面不要带#号;

getElementsByClassName(): 返回带有指定类的所有元素的类数组对象;
语法：document.getElementsByClassName(class)，注意class名称前面不要带.号;

2、js获取当前时间

js处理当前时间,我们需要注意以下几点:

获取的月份数字，需要加1才是实际月份
获取的每周七天星期数字，0代表的是星期日
拼接年月日，时分秒时，先用个空字符串拼接，不然就会变成数字加法运算
需要检测数字位数,小于10的数字前面加个0

3、年月日，时分秒，星期数字的替换

怎么让时钟计时在页面上动起来，这个是我们的重点任务！！！
上一步我们实现了获取到当前年月日，时分秒的数字字符串，我们要做的就是循坏这两个数字字符串，然后运用charAt()方法返回指定位置的字符，拼接成数字图片的路径。因此我们0-9的数字图片的名称就要求统一用0-9.png的名字,方便我们处理。
举个栗子：年月日数字字符串是20210709,循坏这个数字字符串拼接成20210709这几个数字的png图片的路径,分别替换掉变化前图片的src就实现了年月日，时分秒数字的替换

星期的数字替换就简单些了，首先我们把星期的数字图片按顺序0-6的放在一个数组里面，记得0代表的是星期日，所以放数组第一位，通过getDay()方法获得的数字就是数组的下标，用下标取出星期图片的路径，替换掉变化前图片的src就实现了星期的数字替换