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

话不多说，请看代码：

 
 
 
 
 
 
 
 
 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;  
  white-space: -moz-pre-wrap;  
  white-space: -pre-wrap;  
  white-space: -o-pre-wrap;  
  word-wrap: break-word; 
 }
 .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;
 }
 
 


 
 项目地址
 返回首页
 
 
 
  
#例子1# 12:00:00到11:50:00
  
12:00:00
 
 
 
  

  endtime: '11:50:00'，设置结束时间/默认值为空||0，执行其他默认参数
  
  
new countdown("#countdown", {
  endtime: '11:50:00'
  });
 
 
  
#例子2# 60到50
  
60
 
 
 
  

  countEnd: 'function'，设置结束倒计时后触发的函数/默认值为空，执行其他默认参数
  
  
new countdown("#countdown1", {
  endtime: '50',
  countEnd: function() {
   alert("结束")
  }
  });
 
 
  
#例子3# 60到0
  

 
 
 
  

  starttime:'60'，设置开始时间/默认值为元素内容，执行其他默认参数
  
  
new countdown("#countdown2", {
  starttime:'60'
  });
 
 
  
#例子4# 2017/01/11,11:00:00到1970/1/1
  
2017/01/11,11:00:00
 
 
 
  

  format:'yy:MM:dd:hh:mm:ss'，格式化输出的时间格式/默认值为'hh:mm:ss'，执行其他默认参数
  
  
new countdown("#countdown3", {
  format:'yy:MM:dd:hh:mm:ss'
  });
 
 
  
  调用方法：
  
new countdown(selector,{options});
  
  options参数
  

  

   

   
参数
   
默认值
   
说明
   
  
  

   

   
format
   
'hh:mm:ss'
   
格式化输出的时间格式，年(y)、月(M)、日(d)、小时(h)、分(m)、秒(s)、毫秒(S)、季度(q)
   
   

   
starttime
   
''
   
开始时间
   
   

   
endtime
   
''
   
结束时间
   
   

   
interval
   
1000
   
计数的时间间隔（单位：毫秒）
   
   

   
countEach(time)
   
[时间格式化输出]
   
每计时单位执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出
   
   

   
countEnd(time)
   
[时间格式化输出]
   
计时结束后执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出
   
  
  
 
 

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