jQuery倒计时精确到秒

最新推荐文章于 2021-09-16 12:33:11 发布

置顶 CiCiCi12

最新推荐文章于 2021-09-16 12:33:11 发布

阅读量767

点赞数 1

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/CiCiCi12/article/details/106404877

版权

效果图：
在这里插入图片描述 **
从左到右依次为天数，小时数，分钟数，秒数。
只支持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时，每执行一次，秒数减1
		if(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时，分钟值减1
			if(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>

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

CiCiCi12

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 hou
复制链接

扫一扫