一個頁面多個倒計時
阿新 • • 發佈：2019-01-03
直接上程式碼了。<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!--<base href="" /><!-- --> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>倒計時</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> div{height:auto;overflow:hidden;} </style> </head> <body> <div style="width:1065px;margin:0 auto;"> </div> <div class="yomibox" data="2015-10-11 00:00:10" enttime="2015-10-11 00:00:50"></div> <div class="yomibox" data="2015-11-15 00:00:15" enttime="2015-11-15 02:00:00"></div> <div class="yomibox" data="2015-12-11 00:00:09" enttime="2015-12-11 02:00:00"></div> <div class="yomibox" data="2015-10-23 00:00:23" enttime="2015-10-23 02:00:00"></div> </div> <script> (function($){ $.fn.yomi=function(){ var nowTime = 1444492800; var data=""; var _DOM=null; var TIMER; createdom =function(dom){ _DOM=dom; data=$(dom).attr("data"); data = data.replace(/-/g,"/"); data = Math.round((new Date(data)).getTime()/1000); $(_DOM).append("<ul class='yomi'><li class='yomiday'></li><li class='split'>天</li><li class='yomihour'></li><li class='split'>:</li><li class='yomimin'></li><li class='split'>:</li><li class='yomisec'></li></ul>") reflash(); }; reflash=function(){ var range = data-Math.round(nowTime), secday = 86400, sechour = 3600, days = parseInt(range/secday), hours = parseInt((range%secday)/sechour), min = parseInt(((range%secday)%sechour)/60), sec = ((range%secday)%sechour)%60; if (range < 0){ /** * 獲取當前的狀態，如果狀態為未開始，則把即將開始改為立即報名，距離開始時間改為距離結束時間 * 如果狀態為進行中，則把立即報名改為報名已截止 * 如果狀態為已結束 * */ var entTime = $(_DOM).attr("enttime") //console.log(entTime) var jiesutime = new Date(Date.parse(entTime.replace(/-/g, "/"))); //var timestamp=new Date().getTime() var timestamp=nowTime * 1000 if(jiesutime > timestamp){ getTimet(entTime, _DOM,nowTime) }else { $(_DOM).html("結束") } }else{ $(_DOM).find(".yomiday").html(nol(days)); $(_DOM).find(".yomihour").html(nol(hours)); $(_DOM).find(".yomimin").html(nol(min)); $(_DOM).find(".yomisec").html(nol(sec)); } nowTime++ }; TIMER = setInterval( reflash,1000 ); nol = function(h){ return h>9?h:'0'+h; } return this.each(function(){ var $box = $(this); createdom($box); }); } })(jQuery); $(function(){ $(".yomibox").each(function(){ $(this).yomi(); }); $("head").append("<style type='text/css'>.yomi {list-style:none;}.yomi li{float:left;background:#000;color:#fff;border-radius:50%;padding:10px;font-size:14px; font-weight:bold;margin:10px;}.yomi li.split{background:none;margin:10px 0;padding:10px 0;color:#000000;}</style>") }); function getTimet(data, _DOM,nowTime){ data = data.replace(/-/g,"/"); data = Math.round((new Date(data)).getTime()/1000); //var timePhp = parseInt(json.time); var range = data-Math.round(nowTime), secday = 86400, sechour = 3600, days = parseInt(range/secday,10), hours = parseInt((range%secday)/sechour), min = parseInt(((range%secday)%sechour)/60), sec = ((range%secday)%sechour)%60; $(_DOM).find(".yomiday").html(nol(days)); $(_DOM).find(".yomihour").html(nol(hours)); $(_DOM).find(".yomimin").html(nol(min)); $(_DOM).find(".yomisec").html(nol(sec)); } </script> </body> </html>