网站首页 文章专栏 跑秒计时器(毫秒)
点击地址查看事例:http://static.hebinghua.com/sucai/anniversary.html
源代码: <div style="background:rgb(183,17,41); width: 100%; color:#fff;text-align: center;"> <P style="font-size:.8em;line-height:2em;">10s挑战:</P> <div id="fnTimeCountDown" data-end="2018/11/08 18:45:13"> <span id="anniversary-time-1">0</span> <span id="anniversary-time-2">0</span> <span >.</span> <span id="anniversary-time-3">0</span> <span id="anniversary-time-4">0</span> <span id="anniversary-time-5">0</span> </div> <input type="button" value="开始" data-type="1" id="gostarttime"> <input type="button" value="重置" onclick="reserttime()"> </div> <script type="text/javascript"> var ref=''; // $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13"); $('#gostarttime').on('click',function(){ // $('#fnTimeCountDown').end(new Date()); var type = $(this).data('type'); if (type == 1) { $("#fnTimeCountDown").fnTimeCountDown(new Date()); $(this).val('停止'); $(this).data('type',0) } else { stoptime() } }) function stoptime(){ clearInterval(ref); } function reserttime(){ $("#anniversary-time-1").text(0); $("#anniversary-time-2").text(0); $("#anniversary-time-3").text(0); $("#anniversary-time-4").text(0); $("#anniversary-time-5").text(0); $('#gostarttime').data('type',1) $('#gostarttime').val('开始'); clearInterval(ref); } </script> <script type="text/javascript"> $.extend($.fn,{ fnTimeCountDown:function(d){ this.each(function(){ var $this = $(this); var o = { time1: $this.find("#anniversary-time-1"), time2: $this.find("#anniversary-time-2"), time3: $this.find("#anniversary-time-3"), time4: $this.find("#anniversary-time-4"), time5: $this.find("#anniversary-time-5"), }; var f = { haomiao: function(n){ if(n < 10)return "00" + n.toString(); if(n < 100)return "0" + n.toString(); return n.toString(); }, zero: function(n){ var _n = parseInt(n, 10);//解析字符串,返回整数 if(_n > 0){ if(_n <= 9){ _n = "0" + _n } return String(_n); }else{ return "00"; } }, dv: function(){ var _d = d; var now = new Date(), endDate = new Date(_d); //现在将来秒差值 var dur = (now.getTime()-endDate) / 1000 , mss =now.getTime()- endDate ,pms = { time1:"0", time2:"0", time3:"0", time4:"0", time5:"0", }; if(mss > 0){ var temp1=f.haomiao(mss % 1000),temp2=f.zero(dur % 60); pms.time5 = temp1.substring(2,3); pms.time4 = temp1.substring(1,2); pms.time3 = temp1.substring(0,1); pms.time2 = temp2.substring(1,2); pms.time1 = temp2.substring(0,1); } return pms; }, ui: function(){ if(o.time1){ o.time1.html(f.dv().time1); } if(o.time2){ o.time2.html(f.dv().time2); } if(o.time3){ o.time3.html(f.dv().time3); } if(o.time4){ o.time4.html(f.dv().time4); } if(o.time5){ o.time5.html(f.dv().time5); } ref=setTimeout(f.ui, 1); } }; f.ui(); }); } }); </script>
转载请注明出处