jQuery实现的倒计时效果实例小结

2019-11-20 10:15:18

字体：大中小

来源：转载

供稿：网友

本文实例总结了jQuery实现的倒计时效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery实现倒计时效果</title><script language="javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript"> var SysSecond; var InterValObj; $(document).ready(function() { SysSecond = parseInt($("#remainSeconds").html()); //这里我是在服务端算好了剩余的秒数，并保存到客户端，如果过期则返回0 InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行 }); //代理,接单的时间+1小时减去当前时间的秒数 function SetRemainTime() { if (SysSecond > 0) {  //alert(SysSecond);  SysSecond = SysSecond - 1;  var second = Math.floor(SysSecond % 60); // 计算秒  var minite = Math.floor((SysSecond / 60) % 60); //计算分  var hour = Math.floor((SysSecond / 3600) % 24); //计算小时  var day = Math.floor((SysSecond / 3600) / 24); //计算天  $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒"); } else {//剩余时间小于或等于0的时候，就停止间隔函数  window.clearInterval(InterValObj); } }</script></head><body><div id="remainSeconds" style="display:none">18000</div><div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div></body></html>

当我们在webservice里读取到数据库中的时间字段后，把时间分割判断。Javascript代码如下：

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function Times() {var tempTime=document.getElementById("currTime").innerHTML.split(":");var hour=tempTime[0];var minute=tempTime[1];var second=tempTime[2];if(second>=1){second=(second-1>9)?(second-1):"0"+(second-1);}else{  second="59";   if(minute>=1){     minute=(minute-1>9)?(minute-1):"0"+(minute-1);   }else{    minute="59";     if(hour>=1){      hour=(hour-1>9)?(hour-1):"0"+(hour-1);     }else{      minute="00";      hour="0"+0;     }   }}document.getElementById("currTime").innerHTML=hour+":"+minute+":"+second;if(hour==0&&minute==0&&second==0){document .getElementById ("currTime").style .display ="none";}elsesetTimeout (Times,1000);}//当窗体加载是调用。相当于onload（）事件 (function gettime()  {  $.ajax({  contentType:"application/json",  type: "POST",  url: "WebService.asmx/Gettime",  data: "{'id':'1'}",  dataType: 'json',  success: function(msq){  document .getElementById ("currTime").innerHTML =msq.d ;  }  });     setTimeout (Times,1000) ； })(); </script>

多个倒计时>>>

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">  <title>无标题页</title></head><body>  <p>离一模还有<span id="_lefttime1" style="color:red;font-size:12pt;"></span></p><p>离二模还有<span id="_lefttime2" style="color:red;font-size:12pt;"></span></p><p>离高考还有<span id="_lefttime3" style="color:red;font-size:12pt;"></span></p></body></html><SCRIPT LANGUAGE="JavaScript">function _fresh(){var datalist =new Array();datalist =[[new Date("2010/10/1"), "_lefttime1"],[new Date("2010/10/15"), "_lefttime2"],[new Date("2010/10/2"), "_lefttime3"]];for(var i =0; i<datalist.length; i++){var endtime =datalist[i][0];var nowtime = new Date();var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);if(leftsecond<0)leftsecond=0;var __d=parseInt(leftsecond/3600/24);document.getElementById(datalist[i][1]).innerHTML=__d+"天 ";}}setInterval(_fresh,1000);</SCRIPT>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：非常棒的jQuery图片轮播效果

下一篇：jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)