简易图片时钟

思路

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

具体操作

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

 <div><!-- 时 --><img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">:<!-- 分 --><img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">:<!-- 秒 --><img src="data:images/0.png" alt=""><img src="data: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="data:images/0.png" alt=""><img src="data:images/0.png" alt="">:<!-- 分 --><img src="data:images/0.png" alt=""><img src="data:images/0.png" alt="">:<!-- 秒 --><img src="data:images/0.png" alt=""><img src="data: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

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

JS实现简易图片时钟效果相关推荐

php实现飘窗,JS实现网站图片飘窗效果，JavaScript悬浮广告（附详细代码）
原标题:JS实现网站图片飘窗效果,JavaScript悬浮广告(附详细代码) JS实现网站图片飘窗效果,Java悬浮广告,郑州SEO提供以下代码,仅供参考: 飘窗效果-丁光辉博客(www.dinggu ...
单选按钮html图片,js实现的图片单选按钮效果
[实例简介]用js实现的radio图片选择按钮效果. [实例截图] [核心代码] 用JS实现的radio图片选择按钮效果-脚本之家 .lanrentuku img{border:1px solid # ...
js实现简易数码时钟
数码时钟即通过图片数字来显示当前时间: 效果图: HTML基础样式: 1 <body> 2 <div id="hour1"></div> 3 & ...
使用Javascript(js)技术实现动态时钟效果—北大青鸟
效果图: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
这样使用Node.js压缩PNG图片，效果高达75％
安装 Npm 包在我们开始编写代码之前,我们需要安装 npm 包 imagemin 和 imagemin-pngquant. imagemin-pngquant npm 包是 pngquant 压缩 ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
Swiper.js wap app 图片滑动效果
公司wap站改版,需要跟app保持一直,网上找了很多关于Swiper.js的信息,但是都是比较老的.最后找到了 http://www.idangero.us/swiper/demos/#.VY5mVv ...
php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码背景切换因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...

JS实现简易图片时钟效果

简易图片时钟

思路

具体操作

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

运行结果

JS实现简易图片时钟效果相关推荐

最新文章

热门文章