jQuery簡單倒計時效果完整示例

2019-11-20 08:56:13

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery簡單倒計時效果。分享給大家供大家參考，具體如下：

前天做了一個活動項目，其中有一塊需要做倒計時的效果，由于需求比較簡單，所以也就沒用網上各種倒計時的插件。今天抽空整理出來，分享給大家。

html 代碼如下：

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8"/>  <title>倒計時效果</title>  <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>  <style type="text/css">  #countDown{font-size:48px;line-height:10;text-align:center;}  </style></head><body>  <div id="countDown"></div></body></html><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">function countDown(years,months,days,hours,minutes){  var dateFinal = new Date(years,months,days,hours,minutes);  //設置倒計時到達時間  var dateNow = new Date();  //獲取系統當前時間  var dateSub = dateFinal - dateNow;  //計算差值，單位毫秒  var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;  //初始化各個數值  var timeHtml = '';  timeHtml += '距離' + years + '年' + toDouble(months + 1) + '月' + toDouble(days) + '日' + toDouble(hours) + '時' + toDouble(minutes) + '分還剩下';  dayBase = 24 * 60 * 60 * 1000;  //計算天數的基數，單位毫秒。1天等于24*60*60*1000毫秒  hourBase = 60 * 60 * 1000;  //計算小時的基數，單位毫秒。1小時等于60*60*1000毫秒  minuteBase = 60 * 1000;  //計算分鐘的基數，單位毫秒。1分鐘等于60*1000毫秒  secondBase = 1000;  //計算秒鐘的基數，單位毫秒。1秒鐘等于1000毫秒  day = Math.floor(dateSub / dayBase);  //計算天數，并取下限值。如 5.9天 = 5天  hour = Math.floor(dateSub % dayBase / hourBase);  //計算小時，并取下限值。如 20.59小時 = 20小時  minute = Math.floor(dateSub % dayBase % hourBase / minuteBase);  //計算分鐘，并取下限值。如 20.59分鐘 = 20分鐘  second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase);  //計算秒鐘，并取下限值。如 20.59秒 = 20秒  //當天數小于等于0時，就不用顯示  if(day <= 0){    timeHtml += toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';  }else{    timeHtml += day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';  }  $('#countDown').html(timeHtml);}//當小時，分鐘和秒鐘小于 10 的時候會顯示為個位數，比較難看，需要在前面加 0。function toDouble(num){  if(num < 10){    return '0'+ num;  }else{    return '' + num;  }}$(function(){  setInterval(function(){    countDown(2016,9,1,10,0);  },1000);});</script>

運行效果圖如下：