欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年09月20日 11:46:01   作者:朱羽佳  
這篇文章主要介紹了jQuery簡單倒計時效果,結合完整實例形式分析了jQuery針對日期與時間的計算與頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下

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

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

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();  //獲取系統(tǒng)當前時間
  var dateSub = dateFinal - dateNow;  //計算差值,單位毫秒
  var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;  //初始化各個數(shù)值
  var timeHtml = '';
  timeHtml += '距離' + years + '年' + toDouble(months + 1) + '月' + toDouble(days) + '日' + toDouble(hours) + '時' + toDouble(minutes) + '分還剩下';
  dayBase = 24 * 60 * 60 * 1000;  //計算天數(shù)的基數(shù),單位毫秒。1天等于24*60*60*1000毫秒
  hourBase = 60 * 60 * 1000;  //計算小時的基數(shù),單位毫秒。1小時等于60*60*1000毫秒
  minuteBase = 60 * 1000;  //計算分鐘的基數(shù),單位毫秒。1分鐘等于60*1000毫秒
  secondBase = 1000;  //計算秒鐘的基數(shù),單位毫秒。1秒鐘等于1000毫秒
  day = Math.floor(dateSub / dayBase);  //計算天數(shù),并取下限值。如 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秒
  //當天數(shù)小于等于0時,就不用顯示
  if(day <= 0){
    timeHtml += toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';
  }else{
    timeHtml += day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';
  }
  $('#countDown').html(timeHtml);
}
//當小時,分鐘和秒鐘小于 10 的時候會顯示為個位數(shù),比較難看,需要在前面加 0。
function toDouble(num){
  if(num < 10){
    return '0'+ num;
  }else{
    return '' + num;
  }
}
$(function(){
  setInterval(function(){
    countDown(2016,9,1,10,0);
  },1000);
});
</script>

運行效果圖如下:

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery日期與時間操作技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結

希望本文所述對大家jQuery程序設計有所幫助。

相關文章

最新評論