JS实现倒计时图文效果

2019-11-19 12:30:16

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

见下图：