首页
所有分类
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 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
评语(336) 请假条(31) 决心书(42) 保证书(97) 寄语(276) 感谢信(72) 活动总结(790) 倡议书(159) 责任书(145) 制度(225)
You might like
把77A收信机改造成收音机
2021/03/02 无线电
PHP Token(令牌)设计
2008/03/15 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python中的错误处理
2016/04/10 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
美国医生配方营养补充剂供应商：Healthy Directions
2019/07/10 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
工地门卫岗位职责
2013/12/30 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Python中tqdm的使用和例子
2022/09/23 Python