JS实现倒计时图文效果

本文实例为大家分享了JS实现倒计时图文效果的具体代码，供大家参考，具体内容如下

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的宣威网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

<body>
<img src="images/0.png"  id="h2">
<img src="images/0.png"  id="h3">
<img src="images/second1.png" >
<img src="images/0.png"  id="m1">
<img src="images/0.png"  id="m2">
<img src="images/second1.png"  >
<img src="images/0.png"  id="s1">
<img src="images/0.png"  id="s2">
  <script type="text/javascript">
  //获取节点对象
  var oH1=document.getElementById('h2');
  var oH2=document.getElementById('h3');
  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 h2=h%10;
    var h3=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/'+h3+'.png');
    oH2.setAttribute('src','images/'+h2+'.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/'+h3+'.png';
    oH2.src='images/'+h2+'.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>

见下图：

JS实现倒计时图文效果

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

新闻标题：JS实现倒计时图文效果
当前链接：https://www.cdcxhl.com/article6/pgihog.html

成都网站建设公司_创新互联，为您提供网站改版、商城网站、网站内链、手机网站建设、定制开发、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容