JS实现倒计时图文效果
程序员文章站
2022-06-06 09:29:54
本文实例为大家分享了js实现倒计时图文效果的具体代码，供大家参考，具体内容如下
本文实例为大家分享了js实现倒计时图文效果的具体代码，供大家参考，具体内容如下
<body>
<img src="images/0.png" alt="" id="h1">
<img src="images/0.png" alt="" id="h2">
<img src="images/second1.png" alt="">
<img src="images/0.png" alt="" id="m1">
<img src="images/0.png" alt="" id="m2">
<img src="images/second1.png" alt="" >
<img src="images/0.png" alt="" id="s1">
<img src="images/0.png" alt="" id="s2">
<script type="text/javascript">
//获取节点对象
var oh1=document.getelementbyid('h1');
var oh2=document.getelementbyid('h2');
var om1=document.getelementbyid('m1');
var om2=document.getelementbyid('m2');
var os1=document.getelementbyid('s1');
var os2=document.getelementbyid('s2');
//函数调用
gettime();
function gettime(){
//获取截止时间到1970年之间的毫秒数
var endtime=new date('2018-07-13 12:00:00').gettime();
//获取当前时间到1970年之间的毫秒数
var nowtime=new date().gettime();
//时间差（毫秒）
var lefttime=endtime-nowtime;
//获取时分秒
var h=parseint(lefttime/1000/3600);//获得剩余的小时数
var m=parseint(lefttime/1000/60%60);//获得剩余的分钟
var s=parseint(lefttime/1000%60);//获得剩余的秒数
//加零(无论是小时还是分钟还是秒数都会有单个数的时候，所以可以通过加零来让其变成两位数)
h=setnum(h);
m=setnum(m);
s=setnum(s);
//双位数变成单位数
var h1=h%10;
var h2=parseint(h/10);
var m1=m%10;
var m2=parseint(m/10);
var s1=s%10;
var s2=parseint(s/10);
//改变图片地址(下面两种方法都可以实现图片地址的变化)
oh1.setattribute('src','images/'+h2+'.png');
oh2.setattribute('src','images/'+h1+'.png');
om1.setattribute('src','images/'+m2+'.png');
om2.setattribute('src','images/'+m1+'.png');
os1.setattribute('src','images/'+s2+'.png');
os2.setattribute('src','images/'+s1+'.png');
/*oh1.src='images/'+h2+'.png';
oh2.src='images/'+h1+'.png';
om1.src='images/'+m2+'.png';
om2.src='images/'+m1+'.png';
os1.src='images/'+s2+'.png';
os2.src='images/'+s1+'.png';*/
settimeout(gettime,1000);
}
//添零函数
function setnum(num){
if(num<10){
num="0"+num;
}
return num;
}
</script>
</body>
见下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 美女，你会不会喜欢我等幽默笑话三则
下一篇： 我不能告诉你几点了