JS实现简易图片时钟效果

最新推荐文章于 2021-09-17 16:17:21 发布

铃科百合子丶

最新推荐文章于 2021-09-17 16:17:21 发布

阅读量4.5k

点赞数 17

分类专栏：前端文章标签： JS 图片时钟时钟前端

本文链接：https://blog.csdn.net/qq_18372191/article/details/89048660

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简易图片时钟

思路

1.首先创建一个div,在div中有6个img标签，分别代表时分秒。
2.通过dom操作获取这6个img标签。
3.通过new Date()获取时间，根据时间来修改图片的显示。
4.设置定时器，达到一秒一动的效果

具体操作

创建基本的结构，默认显示00:00:00

	<div>
        <!-- 时 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        :
        <!-- 分 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        :
        <!-- 秒 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
    </div>

获取相关元素

 var div=document.querySelector('div');
 var aImg=div.getElementsByTagName('img')

获取时间(重点)

//因为采用的是24h计时法，所以需要判断当前时间是一位数还是两位数，若为一位数那么就在这个数的前面加一个0,否则维持原样不做修改,这里通过一个函数来实现这个功能。
function format(time){//=>接收一个时间作为参数
	//若为一位数则前面加0，否则不变
	return (time<10&&Num>0)?'0'+time:time;
}
//重点:因为经过format处理过的时间会变为字符串类型，所以我们统一对时间进行处理，将他们全部变为字符串类型的数据，后面会使用。
 var oDate=new Date();
 var oHo=format(oDate.getHours())+'';
 var oMi=format(oDate.getMinutes())+'';
 var oSe=format(oDate.getSeconds())+'';

修改图片(重点)

//为了修改图片我们使用一个很重要的概念，charAt(),
//举个例子 var str='abc';
//			str.charAt(0); //a 
//			str.charAt(1); //b
//			str.charAt(2); //c 
//也就是说，我们可以通过这种方法获取到字符串每一位上的内容
//那么我们就需要对之前获取到的时间进行一个处理，将他们合并起来
var aDate=oHo+oMi+oSe; 
//之后我们就可以通过遍历img，获得相应下标，通过下标获取到时间对应的数字根据这个数字修改图片
for(var i=0;i<aImg.length;i++){
	aImg[i].src='images/'+aDate.charAt(i)+'.png'
}

设置定时器（此处不赘述，请看完整代码）

完整代码(对相关代码进行了封装)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- 时 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        :
        <!-- 分 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
        :
        <!-- 秒 -->
        <img src="images/0.png" alt="">
        <img src="images/0.png" alt="">
    </div>
    <script>
        timeMove();
        function timeMove() {
            var oDate=new Date();
            var oHo=format(oDate.getHours())+'';
            var oMi=format(oDate.getMinutes())+'';
            var oSe=format(oDate.getSeconds())+'';
            var aDate=oHo+oMi+oSe;

            var div=document.querySelector('div');
            var aImg=div.getElementsByTagName('img')


            for(var i=0;i<aImg.length;i++){
                aImg[i].src='images/'+aDate.charAt(i)+'.png'
            }
        }
        setInterval(timeMove,1000)
        function format(time){
            return (time<10&&time>0)?'0'+time:time;
        }
    </script>
</body>
</html>

运行结果

在这里插入图片描述

图片来源于冒险岛相关素材,下面是网盘,有需要的可以去下载
链接:https://pan.baidu.com/s/1ObKBHDVtpQGp_o8DpxnfUQ
提取码:ylul

只是个人的一些想法，希望大家指正交流。

铃科百合子丶

关注

17
点赞
踩
52

收藏

觉得还不错? 一键收藏
4
评论
JS实现简易图片时钟效果

简易图片时钟思路1.首先创建一个div,在div中有6个img标签，分别代表时分秒。2.通过dom操作获取这6个img标签。3.通过new Date()获取时间，根据时间来修改图片的显示。4.设置定时器，达到一秒一动的效果具体操作创建基本的结构，默认显示00:00:00 <div>  <im...
复制链接

扫一扫