本文实例为大家分享了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\">
  <  type=\"text/ \">
  //获取节点对象
  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;
  }
  </ >
</body>

见下图：

\"\"

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章