全国服务热线:4008-888-888

技术知识

微信小程序生成_基于JavaScript完成数码时钟效果

基于JavaScript实现数码时钟效果       这篇文章主要为大家详细介绍了基于JavaScript实现数码时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中。 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化。 通过getHours,getMinutes,getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ '(一个空的字符串),将数字转化为字符串,并将这些字符串添加到str中。

var oDate = new Date(); var str = toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds()); for (var i = 0; i aImg.length; i++) { aImg[i].src='images/'+str.charAt(i)+'.jpg'; setInterval(tick,500); tick(); function toDbl(n) if (n 10) { return '0'+n; } else { return ''+n; /script /head body div id="div1" img src="images/1.jpg" img src="images/2.jpg" span : /span img src="images/3.jpg" img src="images/4.jpg" span : /span img src="images/5.jpg" img src="images/6.jpg" /div /body /html

更多JavaScript时钟特效点击查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服