首页
所有分类
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的caller,callee,call,apply
Apr 28 Javascript
Javascript 解疑
Nov 11 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
SRF-S83(1) SRF-S84(1) 台湾(1) 森海(1) 直流胆(1) 南麂列岛(1) S2000(3) MX500(1) 根德(2) PL660(1)
You might like
PHP数组实例总结与说明
2011/08/23 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python读写文件操作示例程序
2013/12/02 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python僵尸进程产生的原因
2017/07/21 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
pow在python中的含义及用法
2019/07/11 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
亚瑟士美国官网：ASICS美国
2017/02/01 全球购物
实习护士自我鉴定
2013/10/13 职场文书
年度考核自我评价
2014/01/25 职场文书
庆祝教师节标语
2014/10/09 职场文书
中学生逃课检讨书
2015/02/17 职场文书
python 对图片进行简单的处理
2021/06/23 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle