webJS基础-----制作一个时间倒计时_javascript 写一个距离2024年的函数倒计时

作者：从前慢现在也慢 | 2024-04-04 23:26:21

踩

javascript 写一个距离2024年的函数倒计时

1，可以使用以下两个方式制作

方式1：setTimeout ()定时器是在指定的时间后执行某些代码，代码执行一次就会自动停止；

方式2：setInterval ()定时器是按照指定的周期来重复执行某些代码，该定时器不会自动停止，需要调用clearInterval ()来手动停止。

2，参考代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			
		</div>
		<div id="div1">
			
		</div>
		<script type="text/javascript">
			//getTime方法用于获取时间戳
			// 1,时间倒计时设计方式1
			timer();//setTimeout函数需要手动调用
			function timer(){
				var nowdate = new Date();
				var aimDate = new Date("2024/01/01 00:00:00");//获取指定的未来时间
				var cur = aimDate.getTime() - nowdate.getTime();//获取时间戳之差
				if(cur==0||cur<0){
					document.getElementById('div').innerHTML = '新年快乐！';
					return;//返回函数，停止调用其后的语句
				}
				var d = Math.floor(cur/1000/60/60/24);
				var h = Math.floor(cur/1000/60/60%24);
				var m = Math.floor(cur/1000/60%60);
				var s = Math.floor(cur/1000%60);
				var ms = Math.floor(cur%1000);
				document.getElementById('div').innerHTML = '距离2024年还有'+d+'天'+h+'时'+m+'分钟'+s+'秒'+ms+'毫秒';
				setTimeout('timer()',1);
			}
			//2，时间倒计时方式2
				
			var timer1 = setInterval(function(){
				var nowdate = new Date();
				var aimDate = new Date("2024/01/01 00:00:00");
				var cur = aimDate.getTime() - nowdate.getTime();
				if(cur==0||cur<0){
					document.getElementById('div').innerHTML = '新年快乐！';
					clearInterval(timer1);//停止函数
					return;
				}
				var d = Math.floor(cur/1000/60/60/24);
				var h = Math.floor(cur/1000/60/60%24);
				var m = Math.floor(cur/1000/60%60);
				var s = Math.floor(cur/1000%60);
				var ms = Math.floor(cur%1000);
				document.getElementById('div1').innerHTML = '距离2024年还有'+d+'天'+h+'时'+m+'分钟'+s+'秒'+ms+'毫秒';
         	},1);										 
		</script>
	</body>
</html>

3，结果示例如下

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/361852