期间倒计时 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>期间倒计时</title> </head> <body> <span class="group_overtime" begintime="2016/01/08 02:00:00" endtime="2018/01/08 06:00:00"></span> <a class="apply btn btn-danger" onclick="showThisApply(4717)" style="float:right">我要报名</a> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> var countdown = new Object(); countdown.intervalSize = 1000;//间隔时间 1s countdown.overTimeStart = function () { countdown.timeDom = $(".group_overtime"); var nowDate = new Date(); countdown.timeDom.each(function (index, element) { var beginTime, endTime; var dom = $(this); beginTime = dom.attr("begintime"); if (!beginTime || beginTime.length == 0) {//如果起始或者结束事件没有填写则跳过 this.timeType = -1; countdown.getApplyBtn(this, true); return true; } this.beginTime = new Date(beginTime); endTime = dom.attr("endtime"); if (!endTime || endTime.length == 0) { this.timeType = -1; countdown.getApplyBtn(this, true); return true; } this.endTime = new Date(endTime); if (nowDate < this.beginTime) {//小于开始时间显示倒计时 this.timeType = 0; } else if (nowDate < this.endTime) {//正在报名中 this.timeType = 1; this.innerHTML = "正在报名中"; } else {//活动结束 this.timeType = 2; this.innerHTML = "活动已经结束"; countdown.getApplyBtn(this, true); } }); countdown.Work(); this.interval = window.setInterval(function () { countdown.Work(); }, this.intervalSize); }; countdown.getApplyBtn = function (dom, toggle) { dom = $(dom); var applyBtn = dom.parent().parent().parent().find(".apply"); if (toggle) { applyBtn.toggle(); } }; countdown.overTimeStop = function () { window.clearInterval(this.interval); }; countdown.Work = function () { if (countdown.timeDom.length == 0) {//如果全部结束了退出定时器 countdown.overTimeStop(); return; } countdown.timeDom.each(countdown.overTimeWork, [new Date()]); }; countdown.overTimeWork = function () { var dom = this; var nowTime = arguments[0];//当前时间 var overTime; if (dom.timeType == 1) {//正在报名中 overTime = dom.endTime; if (nowTime > overTime) { dom.timeType = 2; dom.innerHTML = "活动已经结束"; countdown.getApplyBtn(this, true); return true; } } else if (dom.timeType == 0) { overTime = dom.beginTime; } else { return true; } //var overTime = new Date("2014/12/01 14:00:00.0"); var leaveTime = overTime.getTime() - nowTime.getTime(); //if (leaveTime <= 0) { // dom.timeType = 1; // dom.innerHTML = "正在报名中"; // return true; //} leaveTime = parseInt(leaveTime / 1000); var timeArray = new Array();//0天10时30分59秒 var day, hour, minute, second; day = Math.floor(leaveTime / 86400);//天 60*60*24 timeArray.push(day); timeArray.push("天"); day = day * 86400; hour = Math.floor(((leaveTime - day) / 3600));//小时 60*60 if (hour < 10) { timeArray.push(0); } timeArray.push(hour); timeArray.push("时"); hour = hour * 3600; minute = Math.floor((leaveTime - day - hour) / 60);//分 60 if (minute < 10) { timeArray.push(0); } timeArray.push(minute); timeArray.push("分"); minute = minute * 60; second = leaveTime - day - hour - minute; if (second < 10) { timeArray.push(0); } timeArray.push(second); timeArray.push("秒"); if (dom.timeType == 1) { timeArray.push("后结束"); } else { timeArray.push("后开团"); } dom.innerHTML = timeArray.join(""); }; $(document).ready(function (e) { countdown.overTimeStart(); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 期间倒计时