欧美夫妻性生活视频,欧美激情影院,亚洲成人免费看

導航首頁 ? 技術教程 ? 基于jquery插件編寫countdown計時器

全站頭部文字我要出現在這里

基于jquery插件編寫countdown計時器 680 2024-02-28

廢話不多說，直接上代碼：
先展示一下插件調用方式：

1. 需要先加載countdown插件對應的css文件，也就幾行代碼而已，可以不用引入，自己手寫一樣啦

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <title>jquery countdown倒計時插件</title>
 <link rel="stylesheet" type="text/css" />
 </head>

css代碼內容:

 * {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

html,
body {
 font: 24px/1.5 'Microsoft YaHei', arial, tahoma, '5b8b4f53', sans-serif;
 font-weight: 700;
 background: #efefef;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
}

#countdown {
 width: 60%;
 margin: 20% auto;
 color: #ff4d4d;
}

.countdown-day,
.countdown-hour,
.countdown-minute,
.countdown-second {
 display: inline-block;
 margin: 0 .5rem;
 background: #ff3f0f;
 font-size: 2rem;
 font-weight: 700;
 color: #fff;
}

2.再加載js文件，在此之前得先引入jquery
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery.countdown-1.0.0.min.js"></script>
3.然后定義一個顯示時間的元素，初始化配置后就可以看到計時啦

<body>
 <div id="countdown"></div>

 <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-2.2.4.min.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery.countdown-1.0.0.min.js"></script>
 <script>
 $('#countdown').countdown({
 //活動開始時間 (可采用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
 //優先采取元素的data-stime值(該值只能為時間戳格式)
 startTime: '2016/6/11 17:54:00',//活動結束時間 (可采用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
 //優先采取元素的data-etime值(該值只能為時間戳格式)   
 endTime: '2016/6/11 17:55:00',
 //活動開始前倒計時的修飾
 //可自定義元素,例如"<span>距離活動開始倒計時還有:</span>"   
 beforeStart: '距離活動開始倒計時還有:',
 //活動進行中倒計時的修飾 
 //可自定義元素,例如"<span>距離活動截止還有:</span>" 
 beforeEnd: '距離活動截止還有:',
 //活動結束后的修飾
 //可自定義元素,例如"<span>活動已結束</span>"    
 afterEnd: '親，活動結束啦，請繼續關注哦!',
 //時間格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
 format: 'dd:hh:mm:ss',
 //活動結束后的回調函數     
 callback: function() {
  console.log('親，活動結束啦，請繼續關注哦!');
 }
 });
 </script>
 </body>

然后附上countdown插件的源代碼，大神們看了不要見笑哈...

/**
 * 簡單的jquery購物商城秒殺倒計時插件
 * @date 2016-06-11
 * @author TangShiwei
 * @email 591468061@qq.com
 */
;(function(factory) {
 "use strict";
 // AMD RequireJS
 if (typeof define === "function" && define.amd) {
  define(["jquery"], factory);
 } else {
  factory(jQuery);
 }
 })(function($) {
 "use strict";
 $.fn.extend({
  countdown: function(options) {
  if (options && typeof(options) !== 'object') {
  return false;
  }
  //默認配置
  var defaults = {
  //活動開始時間 (可采用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
  //優先采取元素的data-stime值(該值只能為時間戳格式)
  startTime: '2016/6/11 21:00:00',
  //活動結束時間 (可采用時間戳 或者 標準日期時間格式 "yyyy/MM/dd HH:mm:ss")
  //優先采取元素的data-etime值(該值只能為時間戳格式)   
  endTime: '2016/6/11 24:00:00',
  //活動開始前倒計時的修飾
  //可自定義元素,例如"<span>距離活動開始倒計時還有:</span>"   
  beforeStart: '距離活動開始倒計時還有:',
  //活動進行中倒計時的修飾 
  //可自定義元素,例如"<span>距離活動截止還有:</span>" 
  beforeEnd: '距離活動截止還有:',
  //活動結束后的修飾
  //可自定義元素,例如"<span>活動已結束</span>"    
  afterEnd: '活動已結束',
  //時間格式化(可采用"ddd:hh:mm:ss、 dd:hh:mm:ss、 hh:mm:ss、 mm:ss、 ss"等)     
  format: 'dd:hh:mm:ss',
  //活動結束后的回調函數     
  callback: function() {     
  return false;
  }
  };
  //根據時間格式渲染對應結構
  var strategies = {
  "4": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-day">' + timeArr[0] + '</span>天' + 　'<span class="countdown-hour">' + timeArr[1] + '</span>時' + '<span class="countdown-minute">' + timeArr[2] + '</span>分' + '<span class="countdown-second">' + timeArr[3] + '</span>秒');
  },
  "3": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-hour">' + timeArr[0] + '</span>時' + '<span class="countdown-minute">' + timeArr[1] + '</span>分' + '<span class="countdown-second">' + timeArr[2] + '</span>秒');
  },
  "2": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-minute">' + timeArr[0] + '</span>分' + '<span class="countdown-second">' + timeArr[1] + '</span>秒');
  },
  "1": function($this, timeArr, desc) {
  return $this.html(desc + '<span class="countdown-second">' + timeArr[0] + '</span>秒');
  }
  };
  /**
  * [killTime 時間差換算并進行格式化操作]
  * @param {[Object]} _this_ [jquery對象]
  * @param {[Number]} sTime [當前時間]
  * @param {[Number]} eTime [結束時間]
  * @param {[String]} desc [時間修飾]
  * @param {[String]} format [時間格式]
  * @return {[Function]} strategies [根據格式渲染對應結構]
  */
  var killTime = function(_this_, sTime, eTime, desc, format) {
  var diffSec = (eTime - sTime) / 1000;
  var map = {
  h: Math.floor(diffSec / (60 * 60)) % 24,
  m: Math.floor(diffSec / 60) % 60,
  s: Math.floor(diffSec % 60)
  };
  var format = format.replace(/([dhms])+/g, function(match, subExp) {
  var subExpVal = map[subExp];
  if (subExpVal !== undefined) {
   if (match.length > 1) {
   subExpVal = '0' + subExpVal;
   subExpVal = subExpVal.substr(subExpVal.length - match.length);
   return subExpVal;
   }
  } else if (subExp === 'd') {
   if (match.length >= 1 && match.length < 4) {
   map[subExp] = Math.floor(diffSec / (60 * 60 * 24));
   var d = '00' + map[subExp];
   return d.substr(d.length - match.length);
   }
  }
  return match;
  });
  //將時間格式通過":"符號進行分組
  var timeArr = String.prototype.split.call(format, ':');
  /**
  * [render 通過分組情況渲染對應結構]
  * @param {[Object]} _this_ [jquery對象]
  * @param {[Number]} timeArrLen [時間分組后的數組長度]
  * @param {[Array]} timeArr [時間分組后的數組]
  * @param {[String]} desc [時間修飾]
  * @return {[Function]} strategies [根據數組長度渲染對應結構]
  */
  var render = function(_this_, timeArrLen, timeArr, desc) {
  return strategies[timeArrLen](_this_, timeArr, desc);
  };
  render(_this_, timeArr.length, timeArr, desc);
  }
  //覆蓋默認配置
  var opts = $.extend({}, defaults, options);
  return this.each(function() {
  var $this = $(this);
  var _timer = null;
  //優先采取元素的data-stime值(該值只能為時間戳格式)
  var sTime = $this.data('stime') ? parseInt($this.data('stime'), 10) : (new Date(opts.startTime)).getTime();
  //優先采取元素的data-etime值(該值只能為時間戳格式)
  var eTime = $this.data('etime') ? parseInt($this.data('etime'), 10) : (new Date(opts.endTime)).getTime();
  if (_timer) {
  clearInterval(_timer);
  }
  _timer = setInterval(function() {
  var nowTime = (new Date()).getTime();
  if (nowTime < sTime) {
   //活動暫未開始
   killTime($this, nowTime, sTime, opts.beforeStart, opts.format);
  } else if (nowTime >= sTime && nowTime <= eTime) {
   //活動進行中
   killTime($this, nowTime, eTime, opts.beforeEnd, opts.format);
  } else {
   //活動已結束
   clearInterval(_timer);
   $this.html(opts.afterEnd);
   if (opts.callback && $.isFunction(opts.callback)) {
   opts.callback.call($this);
   }
  }
  }, 1000);
  });
  }
 });
 });

然后再來幾個效果圖吧:

查看圖片

精彩專題分享：js實現倒計時功能匯總

以上就是本文的全部內容，希望對大家學習jQuery有所幫助

jquery

#免責聲明#

本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的；不得將上述內容用于商業或者非法用途，否則，一切后果請用戶自負。本站信息來自網絡收集整理，版權爭議與本站無關。您必須在下載后的24個小時之內，從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容，請支持正版，購買注冊，得到更好的正版服務。我們非常重視版權問題，如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解！

文章分類