当前位置：首页 > 编程教程 > javascript技术文章 > JS实现倒计时图文效果

实现JS倒计时图文效果

  • 发布时间：
  • 作者：码农之家
  • 点击：65

这篇文章主要知识点是关于js倒计时、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书

JavaScript核心技术开发解密
JavaScript核心技术开发解密原书扫描版
  • 类型：JavaScript大小：68.4 MB格式：PDF作者：阳波
立即下载

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>

见下图：

JS实现倒计时图文效果

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

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.719015

2种简单的js倒计时方式

一般倒计时的时间都是后台传来的然后渲染到页面，这里有2个简单的倒计时方式 //带天数的倒计时function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (60 * 60)) - (day * 24); minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); } if (day = 9) day = '0' + day; if (hour = 9) hour = '0' + hour; if (minute = 9) minute = '0' + minute; if (second = 9) second = '0' + second; // console.log(day+"天:"+hour+"小时："+minute+"分钟："+second+"秒"); times--; },1000); if(times=0){ clearInterval(timer); }} //单纯分钟和秒倒计时function resetTime(time){ var timer=null; var t=time; var m=0; var s=0; m=Math.floor(t/60%60); m10(m='0'+m); s=Math.floor(t%60); function countDown(){ s--; s10(s='0'+s); if(s.leng……

网友NO.564666

JS倒计时实例_天时分秒

HTML代码： div id="times_wrap" class="time_num" 距离结束时间： div class="time_w" b id="times_d" class="time" /b天 b id="times_h" class="time" /b时 b id="times_m" class="time" /b分 b id="times_s" class="time" /b秒 /div/div JavaScript代码： script type="text/javascript"setTimeout("show_time()",1000);var time_wrap = document.getElementByIdx_x("times_wrap");var time_d = document.getElementByIdx_x("times_d");var time_h = document.getElementByIdx_x("times_h");var time_m = document.getElementByIdx_x("times_m");var time_s = document.getElementByIdx_x("times_s");var time_end = new Date("2012/10/29 08:00:00"); // 设定结束时间time_end = time_end.getTime();function show_time(){ var time_now = new Date(); // 获取当前时间 time_now = time_now.getTime(); var time_distance = time_end - time_now; // 结束时间减去当前时间 var int_day, int_hour, int_minute, int_second; if(time_distance = 0){ // 天时分秒换算 int_day = Math.floor(time_distance/86400000) time_dist……

网友NO.958030

js防刷新的倒计时代码 js倒计时代码

最近在维护考试系统，在进行考试测试时无意中点击了刷新按钮，但是上面的倒计时并没有受到影响，同时在几篇博客中也有这样的例子，所以我想看看它到底是怎样防止刷新的。 如果是用cs代码写，我们可能会很快的写出来怎样防止刷新，可是我们要进行前段开发，考试是在页面上进行的，这里就要用到我们学到的js了。 htmlxmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type"content="text/html; charset=gb2312" /title前端开发/title/head bodySCRIPT LANGUAGE="JavaScript"!--var maxtime;if(window.name==''){maxtime = 1*60;}else{maxtime = window.name;} function CountDown(){if(maxtime=0){minutes = Math.floor(maxtime/60);seconds = Math.floor(maxtime%60);msg = "距离考试结束还有"+minutes+"分"+seconds+"秒";document.all["timer"].innerHTML = msg;if(maxtime == 5*60) alert('注意，还有5分钟!');--maxtime;window.name = maxtime;}else{clearInterval(timer);alert("考……

<
1
>
发布评论

最新文章

文章排行

最新电子书

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助：520161757@qq.com