原生JS会跳动的电子表

2017-01-07 08:40:14来源:作者:人点击

一个会跳动的电子表,源码--time.html 图片--img

github地址:https://github.com/1056237661/practiceCode

<!DOCTYPE html><html> <head><meta charset="UTF-8"><title></title><style type="text/css">.timeBox{ margin: 100px; padding: 12px; display: inline-block; border: 1px solid chartreuse;}img{ position: relative;}</style> </head> <body><div class="timeBox"><img class="timeNum" src="img/1.png"/><img class="timeNum" src="img/2.png"/><img src="img/second1.png"/><img class="timeNum" src="img/3.png"/><img class="timeNum" src="img/4.png"/><img src="img/second1.png"/><img class="timeNum" src="img/5.png"/><img class="timeNum" src="img/0.png"/> </div> </body> <script> var aImg = document.getElementsByClassName("timeNum");  /* 获取显示时间的img节点 */ var shockNum = [ -15, 15, -9, 9, -4, 0]; /* 振幅的数组 */ var iNow = [];/* 存储每次需要波动的节点下标 *//* 初始化电子表 */ time();/* 设置定时器更新时间(1s) */ var timer = setInterval(function(){ time(); },1000);/* 获取时间方法 */function time(){var dateNow = new Date(); /* new一个Date对象 */var hours = dateNow.getHours();/* 时 */var minius = dateNow.getMinutes();/* 分 */var seconds = dateNow.getSeconds();/* 秒 */var str = timeStyle(hours)+timeStyle(minius)+timeStyle(seconds); /* 用字符串存储当前时间 *//* 通过str初始化时间表 */for (var i=0; i<str.length; i++) {/* 判断每次是哪个需要波动 */if (aImg[i].index != str.charAt(i)) { /* 首次循环index值全为undefined,禁止全部波动 */ if (aImg[i].index != undefined) { iNow.push(i);/* 把需要波动的值加入iNow数组 */ } aImg[i].index = str.charAt(i);  /* 并赋给新的值 */aImg[i].setAttribute("src","img/"+str.charAt(i)+".png"); /* 替换数字图片 */} }/* 遍历当前需要震动的数组,并设置震动定时器 */for(x in iNow){toshocking(iNow[x]);}/* 每次震动完数组清零 */iNow.length = 0; }/* 为每一个需要震动的数字设置震动定时器 */ function toshocking(z){var n = 0;/* 波动次数 */var timer2 = setInterval(function(){aImg[z].style.top = shockNum+"px";++n;/* 若波动完设置的振幅数组,清除定时器 */if (n==shockNum.length) { clearInterval(timer2)} },20); }// 调整时间的样式,个位数前面加“0” function timeStyle(num){if (num < 10) {return "0"+num;}return num+""; } </script></html>


效果:

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台