AI智能
改变未来

jQuery倒计时精确到秒

效果图:
**
从左到右依次为天数,小时数,分钟数,秒数。
只支持100天(不含)以内进行倒计时。**

var endDate = \"2020-06-30 00:00:00\";var endTime = new Date(endDate).getTime();var date = endTime - new Date().getTime();var days    = date / 1000 / 60 / 60 / 24;var daysRound   = Math.floor(days);var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);var hoursRound   = Math.floor(hours);var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);var minutesRound  = Math.floor(minutes);var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);var secondsRound  = Math.floor(seconds);function timeInfo(){var jsn = {daysRound: daysRound,hoursRound: hoursRound,minutesRound: minutesRound,secondsRound: secondsRound};return jsn;};//获取倒计时的起始时间function showTime(len,round,divPart1,divPart2){if(len < 2){round = \"0\"+round;}divPart1.text(parseInt(round.toString().substring(0,1)));divPart2.text(parseInt(round.toString().substring(1,2)));};//每间隔一秒动态更新倒计时模块数据function countdown(btnGroup){var secflag = false;var minutesflag = false;var hoursflag = false;var timer = setInterval(function(){//定时器每执行一次,重新获取此时毫秒数var currentTime = new Date().getTime();//当当前秒数大于等于结束秒数时,清除定时器。if((currentTime - endTime)/1000 >= 0 ){clearInterval(timer);return;}//当秒数值不为0时,每执行一次,秒数减1if(secondsRound!=0){secondsRound = secondsRound -1;}if(secondsRound.toString().length < 2){secondsRound = \"0\"+secondsRound;}secondsRound1 = parseInt(secondsRound.toString().substring(0,1));secondsRound2 = parseInt(secondsRound.toString().substring(1,2));btnGroup.secondPart1.text(secondsRound1);btnGroup.secondPart2.text(secondsRound2);//当秒数值为59时,此时分钟值才发生变化if(secflag == true){//当秒数值为59,分钟数不为0时,分钟值减1if(minutesRound!=0){minutesRound = minutesRound -1;}if(minutesRound.toString().length < 2){minutesRound = \"0\"+minutesRound;}if(minutesRound.toString()==\'00\'){minutesflag = true;minutesRound = \"59\";}minutesRound1 = parseInt(minutesRound.toString().substring(0,1));minutesRound2 = parseInt(minutesRound.toString().substring(1,2));btnGroup.minutesPart1.text(minutesRound1);btnGroup.minutesPart2.text(minutesRound2);secflag = false;}if(minutesflag == true){if(hoursRound!=0){hoursRound = hoursRound -1;}if(hoursRound.toString().length < 2){hoursRound = \"0\"+hoursRound;}//当小时数为0时,天数减1,小时数从23开始计算if(hoursRound.toString()==\'00\'){hoursflag = true;hoursRound = \"23\";}hoursRound1 = parseInt(hoursRound.toString().substring(0,1));hoursRound2 = parseInt(hoursRound.toString().substring(1,2));btnGroup.hoursPart1.text(hoursRound1);btnGroup.hoursPart2.text(hoursRound2);minutesflag = false;}if(hoursflag == true){if(daysRound!=0){daysRound = daysRound -1;}if(daysRound.toString().length < 2){daysRound = \"0\"+daysRound;}daysRound1 = parseInt(daysRound.toString().substring(0,1));daysRound2 = parseInt(daysRound.toString().substring(1,2));btnGroup.dayPart1.text(daysRound1);btnGroup.dayPart2.text(daysRound2);hoursflag = false;}//当秒数值为0,秒数从60开始递减。if(secondsRound.toString()==\'00\'){secflag = true;secondsRound = \"60\";}},1000);};
<!DOCTYPE html><html><head><title></title><meta charset=\"utf-8\"><script src=\"../jquery-2.1.1.min.js\"></script><script src=\"../scripts/main.js\"></script><div id=\"countdown\"><button id=\"dayPart1\"></button><button id=\"dayPart2\"></button><strong>:</strong><button id=\"hoursPart1\"></button><button id=\"hoursPart2\"></button><strong>:</strong><button id=\"minutesPart1\"></button><button id=\"minutesPart2\"></button><strong>:</strong><button id=\"secondPart1\"></button><button id=\"secondPart2\"></button></div></head><body></body><script type=\"text/javascript\">$(document).ready(function (){var jsn = timeInfo();var daysLen = jsn.daysRound.toString().length;if(daysLen > 2){alert(\"只支持100天(不包含)以内的倒计时\");return;}//获取倒计时的起始天数showTime(daysLen,jsn.daysRound,$(\"#dayPart1\"),$(\"#dayPart2\"));//获取倒计时的起始小时数var hoursLen = jsn.hoursRound.toString().length;showTime(hoursLen,jsn.hoursRound,$(\"#hoursPart1\"),$(\"#hoursPart2\"));//获取倒计时的起始分钟数var minutesLen = jsn.minutesRound.toString().length;showTime(minutesLen,jsn.minutesRound,$(\"#minutesPart1\"),$(\"#minutesPart2\"));//获取倒计时的起始秒数var secondsLen = jsn.secondsRound.toString().length;showTime(secondsLen,jsn.secondsRound,$(\"#secondPart1\"),$(\"#secondPart2\"));var btnGroup = {secondPart1 : $(\"#secondPart1\"),secondPart2 : $(\"#secondPart2\"),minutesPart1 : $(\"#minutesPart1\"),minutesPart2 : $(\"#minutesPart2\"),hoursPart1 : $(\"#hoursPart1\"),hoursPart2 : $(\"#hoursPart2\"),dayPart1 : $(\"#dayPart1\"),dayPart2 : $(\"#dayPart2\")};countdown(btnGroup);});</script></html>

写得比较凌乱,欢迎前辈们指点~

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » jQuery倒计时精确到秒