這篇文章主要介紹了jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)日期與時(shí)間的運(yùn)算實(shí)現(xiàn)倒計(jì)時(shí)功能的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例總結(jié)了jQuery實(shí)現(xiàn)的倒計(jì)時(shí)效果。分享給大家供大家參考，具體如下：

<!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實(shí)現(xiàn)倒計(jì)時(shí)效果</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()); //這里我是在服務(wù)端算好了剩余的秒數(shù)，并保存到客戶端，如果過期則返回0
 InterValObj = window.setInterval(SetRemainTime, 1000); //間隔函數(shù)，1秒執(zhí)行
 });
 //代理,接單的時(shí)間+1小時(shí)減去當(dāng)前時(shí)間的秒數(shù)
 function SetRemainTime() {
 if (SysSecond > 0) {
  //alert(SysSecond);
  SysSecond = SysSecond - 1;
  var second = Math.floor(SysSecond % 60); // 計(jì)算秒
  var minite = Math.floor((SysSecond / 60) % 60); //計(jì)算分
  var hour = Math.floor((SysSecond / 3600) % 24); //計(jì)算小時(shí)
  var day = Math.floor((SysSecond / 3600) / 24); //計(jì)算天
  $("#remainTime").html(day + "天" + hour + "小時(shí)" + minite + "分" + second + "秒");
 } else {//剩余時(shí)間小于或等于0的時(shí)候，就停止間隔函數(shù)
  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>

當(dāng)我們?cè)趙ebservice里讀取到數(shù)據(jù)庫(kù)中的時(shí)間字段后，把時(shí)間分割判斷。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";
}
else
setTimeout (Times,1000);
}
//當(dāng)窗體加載是調(diào)用。相當(dāng)于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>

多個(gè)倒計(jì)時(shí)>>>

代碼:

<!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>無(wú)標(biāo)題頁(yè)</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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery日期與時(shí)間操作技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: