countdown-plugin
Version:
1 lines • 2.15 kB
HTML
<html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <title>countdown demo</title> <style type=text/css>body,html{margin:0;padding:0;color:#333;font-size:14px}.title{padding-left:10px}.content-box{margin:10px}</style> <script type="text/javascript" src="countdown.min.js"></script></head> <body> <h3 class=title>默认（距离：2030/01/01）</h3> <div class=content-box> <div id=box1></div> <button id=btn1>暂停1</button> </div> <hr> <h3 class=title>自定义：格式化 + 毫秒（距离：2019/01/01）</h3> <div class=content-box> <div id=box2></div> <button id=btn2>暂停2</button> </div> <hr> <h3 class=title>自定义：时间戳 - 10秒倒计时</h3> <div class=content-box> <div id=box3></div> <button id=btn3>开始10秒倒计时</button> </div> <script>var c1=new Countdown({change:function(n,t){var e="",i=0;for(var c in n)e+=n[c]+" "+"年天时分秒".charAt(i++)+" ";document.getElementById("box1").innerHTML=e,console.log(n,t)}});c1.start(),document.getElementById("btn1").onclick=function(){c1.starting?(c1.stop(),this.innerHTML="继续1"):(c1.start(),this.innerHTML="暂停1")};var c2=new Countdown({end:"2020/01/01",isFormat:!0,isMilliSecond:!0,change:function(n){var t="",e=0;for(var i in n)t+=n[i]+" "+"年天时分秒".charAt(e++)+" ";document.getElementById("box2").innerHTML=t}});c2.start(),document.getElementById("btn2").onclick=function(){c2.starting?(c2.stop(),this.innerHTML="继续2"):(c2.start(),this.innerHTML="暂停2")};var c3=new Countdown({isMilliSecond:!0,timestamp:10,change:function(n){var t="",e=0;for(var i in n)t+=n[i]+" "+"年天时分秒".charAt(e++)+" ";document.getElementById("box3").innerHTML=t},over:function(){document.getElementById("btn3").setAttribute("disabled","disabled")}});document.getElementById("btn3").onclick=function(){"开始10秒倒计时"===this.innerHTML?(c3.start(),this.innerHTML="暂停3"):c3.starting?(c3.stop(),this.innerHTML="继续3"):(c3.start(),this.innerHTML="暂停3")}</script> </body> </html>