阅读 229

js玩转超酷时钟

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

效果展示

41231231.gif

素材图片

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="./images/title.png" alt=""></div>
        <!-- 年月日 -->
        <div id='date'>
                <img class='imgs' src="./images/2.png" alt="">
                <img class='imgs' src="./images/0.png" alt="">
                <img class='imgs' src="./images/2.png" alt="">
                <img class='imgs' src="./images/1.png" alt="">
                <img src="./images/year.png" alt="">
                <img class='imgs' src="./images/0.png" alt="">
                <img class='imgs' src="./images/5.png" alt="">
                <img src="./images/month.png" alt="">
                <img class='imgs' src="./images/2.png" alt="">
                <img class='imgs' src="./images/0.png" alt="">
                <img src="./images/seven.png" alt="">
        </div>
        <!-- 时分秒星期 -->
        <div id='time'>
                <img class='imgs' src="./images/1.png" alt="">
                <img class='imgs' src="./images/3.png" alt="">
                <img src="./images/colon.png" alt="">
                <img class='imgs' src="./images/1.png" alt="">
                <img class='imgs' src="./images/4.png" alt="">
                <img src="./images/colon.png" alt="">
                <img class='imgs' src="./images/0.png" alt="">
                <img class='imgs' src="./images/0.png" alt="">
                <img src="./images/week.png" alt="">
                <img id='weeks' src="./images/four.png" alt="">
        </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;
}
复制代码

js

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 = './images/' + strDate.charAt(i) + '.png';//年月日数字图片更换
                }
                for (var i = 0; i < timeImgs.length; i++) {
                        timeImgs[i].src = './images/' + strTime.charAt(i) + '.png';//时分秒数字图片更换
                }
                weekImg.src = weekArr[w];//星期图片更换
        };
        changeTime();
        //开启定时器
        setInterval(changeTime, 1000);
}
复制代码

代码讲解

  • html+css部分

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

  • js部分

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

1、 原生js获取对象

getElementById():返回对拥有指定 ID 的第一个对象的引用;
语法:document.getElementById(id),注意id名称前面不要带#号;
image.png getElementsByClassName(): 返回带有指定类的所有元素的类数组对象;
语法:document.getElementsByClassName(class),注意class名称前面不要带.号;
image.png

2、js获取当前时间

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

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

image.png

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

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

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

image.png

4、定时器

最后的最后,就是定时器的使用啦,把上面的内容写成函数,然后用定时器每秒钟调用一次,这样我们的超酷时钟就可以开始工作啦!!!
setInterval():按照指定的周期(以毫秒计)来调用函数。 image.png

结语

新手入门挑战第三篇文章结束,此篇主要用到的就是js处理日期时间的方法以及定时器的使用。
最后祝各位在这次挑战中收获满满,掘金活动越办越好,完结散花!!!

一寸光阴一寸金,寸金难买寸光阴。我们应珍惜时光,而不可虚度年华。

文章分类
前端
文章标签