微客导航 » 文章资讯 » 基于JavaScript实现数码时钟效果

基于JavaScript实现数码时钟效果

2024-01-25 22:20:03 171

本文实例为大家分享了js实现数码时钟效果展示的具体代码，供大家参考，具体内容如下

通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。
通过for循环将数组中的每一项都赋值给img元素相对应的上面，str.charAt(i)通过i递增将str的每个数字输入到src中。
通过封装函数tick，并调用了一次，使得网页在刷新时不会出现图片变化。
通过getHours，getMinutes，getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘'（一个空的字符串），将数字转化为字符串，并将这些字符串添加到str中。

代码：





数码时钟2

*{
background-color:rgb(7,110,177);
vertical-align:middle;
}
#div1{
text-align:center;
width:1300px;
height:220px;
margin:0auto;
}
span{
font-size:50px;
color:white;
}


window.onload=function()
{
varaImg=document.getElementsByTagName('img');
functiontick()
{
varoDate=newDate();
varstr=toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());
for(vari=0;i





:


:

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

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

返回顶部
3162201930
czq8825@qq.com

基于JavaScript实现数码时钟效果

热门推荐

随机推荐