当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JS实现倒计时图文效果

JS实现倒计时图文效果

2018年11月30日  | 移动技术网IT编程  | 我要评论

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

见下图:


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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网