首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现倒计时功能（多种格式调用）

Posted in Javascript onJanuary 12, 2017

话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时-多种格式调用-原生js封装</title>
 <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
 <link rel="icon" href="../public/image/favicon.png" type="images/png"/>
 <link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
 <link rel="stylesheet" type="text/css" href="../public/style/common.css">
 <style type="text/css">
 /*公共*/
 html{
  height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
 }
 ol, ul {
  list-style: none
 }
 body{
  position: relative;
  min-height:100%;
  font-size:14px;
  font-family: Tahoma, Verdana,"Microsoft Yahei";
  color:#333;
 }
 a{
  text-decoration: none;
  color:#333;
 }
 .header{
  width: 960px;
  padding-top: 15px;
  margin: 0 auto;
  line-height: 30px;
  text-align: right;
 }
 .header a{
  margin: 0 5px;
 }
 .main{
  width:960px;
  margin: 50px auto 0;
 }
 .code{
  border:1px dashed #e2e2e2;
  padding:10px 5px;
  margin-bottom:25px;
 }
 pre {
  font-family: "Microsoft Yahei",Arial,Helvetica;
  white-space: pre-wrap; /*css-3*/ 
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
  white-space: -pre-wrap; /*Opera4-6*/ 
  white-space: -o-pre-wrap; /*Opera7*/ 
  word-wrap: break-word; /*InternetExplorer5.5+*/
 }
 .example{
  padding-top:40px;
  margin-bottom:90px;
 }
 .example .call{
  padding:18px 5px;
  background:#f0f5f8;
 }
 .example h2{
  padding-top:20px;
  margin-bottom:7px;
 }
 .example table {
  width:100%;
  table-layout:fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #cee1ee;
  border-left: 0;
 }
 .example thead {
  border-bottom: 1px solid #cee1ee;
  background-color: #e3eef8;
 }
 .example tr {
  line-height: 24px;
  font-size: 13px;
 }
 .example tr:nth-child(2n) {
  background-color: #f0f5f8;
 }
 .example tr th,.example tr td {
  border-left: 1px solid #cee1ee;
  word-break: break-all;
  word-wrap: break-word;
  padding:0 10px;
  font-weight: normal;
 }
 .example tr th {
  color: #555;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: left;
 }
 /*公共*/
 .countdown {
  margin-bottom: 15px;
 }
 </style>
 <script type="text/javascript">
 /*封装代码*/
 (function() {
  var Countdown = function(el, opts) {
  var self = this;
  var defaults = {
   'format': 'hh:mm:ss',   //格式
   'endtime': '',    //结束时间
   'interval': 1000,   //多久倒计时一次 单位：ms
   'starttime':r(el)[0].innerHTML,  //开始时间
   'countEach': function(time) {  //每单位时间出发事件,传入一个对象，包含时间信息(month)和时间格式化输出(format)
   r(el)[0].innerHTML=time['format']
   },
   'countEnd':function (time) {}  //倒计时结束回调事件
  }
  opts = opts || {};
  for (var w in defaults) {
   if ("undefined" == typeof opts[w]) {
   opts[w] = defaults[w];
   }
  }
  this.params = opts;
  this.container = r(el);

  if (this.container.length > 1) {
   var x = [];
   return this.container.each(function() {
   x.push(new Countdown(this, opts))
   }), x
  }
  this._hander=null;
  this._start=0;
  this._end=0;
  this.isTimestamp = isNaN(this.params.starttime)||isNaN(this.params.endtime);//是否为秒计数模式
  this.init();
  }
  Countdown.prototype = {
  //初始化
  init: function() {
   var self = this;
   this.reset();
  },
  reset:function(){
   var self = this;
   if (this.isTimestamp) {
   this._start = this.params.starttime ? this.getTimestamp(this.params.starttime) : (+new Date());
   this._end = this.getTimestamp(this.params.endtime);
   } else {
   this._start = this.params.starttime * 1e3;
   this._end = this.params.endtime * 1e3;
   }
   this.count();
  },
  count:function(){
   var self = this;
   this._hander = setInterval(function(){
   self._start-=self.params.interval;
   self.params.countEach(self.getTime(self._start));
   if(self._start<=self._end){
    clearInterval(self._hander);
    self.params.countEnd();
   }
   },self.params.interval);
  },
  //获取时间戳
  getTimestamp:function(str){
   return +new Date(str)||+new Date('1970/1/1 '+str);
  },
  timeFormat:function(fmt,timestamp){
   var date = new Date(timestamp);
   var o = {
   "M+" : date.getMonth()+1,   //月份
   "d+" : date.getDate(),   //日
   "h+" : date.getHours(),   //小时
   "m+" : date.getMinutes(),   //分
   "s+" : date.getSeconds(),   //秒
   "q+" : Math.floor((date.getMonth()+3)/3), //季度
   "S" : date.getMilliseconds()  //毫秒
   };
   if(/(y+)/.test(fmt)){
   fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
   }
   for(var k in o){
   if(new RegExp("("+ k +")").test(fmt)){
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
   }
   }
   return fmt;
  },
  getTime: function(timestamp) {
   var self = this;
   var date, format;
   if (this.isTimestamp) {
   date = new Date(timestamp);
   format = self.timeFormat(self.params.format, timestamp);
   } else {
   date = new Date();
   format = timestamp / 1e3;
   }
   return {
   'year': date.getFullYear(),
   'month': date.getMonth() + 1,
   'day': date.getDate(),
   'hour': date.getHours(),
   'minute': date.getMinutes(),
   'second': date.getSeconds(),
   'quarter': Math.floor((date.getMonth() + 3) / 3),
   'microsecond': date.getMilliseconds(),
   'format': format
   };
  }
  }
  var r = (function() {
  var e = function(e) {
   var a = this,
   t = 0;
   for (t = 0; t < e.length; t++) {
   a[t] = e[t];
   }
   return a.length = e.length, this
  };
  e.prototype = {
   addClass: function(e) {
   if ("undefined" == typeof e) return this;
   for (var a = e.split(" "), t = 0; t < a.length; t++)
    for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
   return this
   },
   each: function(e) {
   for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
   return this
   },
   html: function(e) {
   if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
   for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
   return this
   },
   find: function(a) {
   for (var t = [], r = 0; r < this.length; r++)
    for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
   return new e(t)
   },
   append: function(a) {
   var t, r;
   for (t = 0; t < this.length; t++)
    if ("string" == typeof a) {
    var i = document.createElement("div");
    for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
    } else if (a instanceof e)
    for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);
   else this[t].appendChild(a);
   return this
   },
  }
  var a = function(a, t) {
   var r = [],
   i = 0;
   if (a && !t && a instanceof e) {
   return a;
   }
   if (a) {
   if ("string" == typeof a) {
    var s, n, o = a.trim();
    if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {
    var l = "div";
    for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createElement(l), n.innerHTML = a, i = 0; i < n.childNodes.length; i++) r.push(n.childNodes[i])
    } else
    for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])
   } else if (a.nodeType || a === window || a === document) {
    r.push(a);
   } else if (a.length > 0 && a[0].nodeType) {
    for (i = 0; i < a.length; i++) {
    r.push(a[i]);
    }
   }
   }
   return new e(r)
  };
  return a;
  }())

  window.countdown = Countdown;
 })()
 /*封装代码*/
 </script>
</head>
<body>
 <div class="header">
 <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
 <a href="/widget/">返回首页</a>
 </div>
 <div class="main">
 <div class="countdown">
  <p>#例子1# 12:00:00到11:50:00</p>
  <p id="countdown" class="">12:00:00</p>
 </div>
 <script type="text/javascript">
  new countdown("#countdown", {
  endtime: '11:50:00'
  });
 </script>
 <div class="code">
  <p>
  endtime: '11:50:00'，设置结束时间/默认值为空||0，执行其他默认参数
  </p>
  <p>new countdown("#countdown", {
  endtime: '11:50:00'
  });</p>
 </div>
 <div class="countdown">
  <p>#例子2# 60到50</p>
  <p id="countdown1" class="">60</p>
 </div>
 <script type="text/javascript">
  new countdown("#countdown1", {
  endtime: '50',
  countEnd: function() {
   alert("结束")
  }
  });
 </script>
 <div class="code">
  <p>
  countEnd: 'function'，设置结束倒计时后触发的函数/默认值为空，执行其他默认参数
  </p>
  <p>new countdown("#countdown1", {
  endtime: '50',
  countEnd: function() {
   alert("结束")
  }
  });</p>
 </div>
 <div class="countdown">
  <p>#例子3# 60到0</p>
  <p id="countdown2" class=""></p>
 </div>
 <script type="text/javascript">
  new countdown("#countdown2", {
  starttime:'60'
  });
 </script>
 <div class="code">
  <p>
  starttime:'60'，设置开始时间/默认值为元素内容，执行其他默认参数
  </p>
  <p>new countdown("#countdown2", {
  starttime:'60'
  });</p>
 </div>
 <div class="countdown">
  <p>#例子4# 2017/01/11,11:00:00到1970/1/1</p>
  <p id="countdown3" class="">2017/01/11,11:00:00</p>
 </div>
 <script type="text/javascript">
  new countdown("#countdown3", {
  format:'yy:MM:dd:hh:mm:ss'
  });
 </script>
 <div class="code">
  <p>
  format:'yy:MM:dd:hh:mm:ss'，格式化输出的时间格式/默认值为'hh:mm:ss'，执行其他默认参数
  </p>
  <p>new countdown("#countdown3", {
  format:'yy:MM:dd:hh:mm:ss'
  });</p>
 </div>
 <div class="example">
  <div class="call">
  <h1>调用方法：</h1>
  <p>new countdown(selector,{options});</p>
  </div>
  <h2>options参数</h2>
  <table>
  <thead>
   <tr>
   <th width="150">参数</th>
   <th width="100">默认值</th>
   <th>说明</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>format</td>
   <td>'hh:mm:ss'</td>
   <td>格式化输出的时间格式，年(y)、月(M)、日(d)、小时(h)、分(m)、秒(s)、毫秒(S)、季度(q)</td>
   </tr>
   <tr>
   <td>starttime</td>
   <td>''</td>
   <td>开始时间</td>
   </tr>
   <tr>
   <td>endtime</td>
   <td>''</td>
   <td>结束时间</td>
   </tr>
   <tr>
   <td>interval</td>
   <td>1000</td>
   <td>计数的时间间隔（单位：毫秒）</td>
   </tr>
   <tr>
   <td>countEach(time)</td>
   <td>[时间格式化输出]</td>
   <td>每计时单位执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出</td>
   </tr>
   <tr>
   <td>countEnd(time)</td>
   <td>[时间格式化输出]</td>
   <td>计时结束后执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出</td>
   </tr>
  </tbody>
  </table>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

原生js实现倒计时功能（多种格式调用）

- Author -

继小鹏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
JavaScript定义全局对象的方法示例
Jan 12 #Javascript
Node.js制作简单聊天室
Jan 12 #Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 #Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 #Javascript
jQuery Validate 数组 全部验证问题
Jan 12 #Javascript
easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码
Jan 12 #Javascript
React创建组件的三种方式及其区别
Jan 12 #Javascript
历史记录(1) pycryto(1) html标准库(1) dll(1) key(1) 有序排列(1) 公共键(1) 遍历文件夹(1) python-pcl(1) Anaconda(2)
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP4实际应用经验篇(5)
2006/10/09 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
PHP常用的三种设计模式
2017/02/17 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[02:12]打造更好的电竞完美世界：完美盛典回顾篇
2018/12/19 DOTA
python根据文件大小打log日志
2014/10/09 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python实现windows下文件备份脚本
2018/05/27 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python psutil监控进程实例
2019/12/17 Python
浅析CSS3 中的 transition，transform，translate之间区别和作用
2020/03/26 HTML / CSS
Hotels.com越南：酒店预订
2019/10/29 全球购物
科技馆观后感
2015/06/08 职场文书
单位工作证明范本
2015/06/15 职场文书
初三语文教学反思
2016/03/03 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL