倒计时代码

今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下：一、电商网站倒计时一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。代码如下：<!DOCTYPE html><html>&lt

蒲公英1001

6544人浏览 · 2022-03-08 20:48:05

蒲公英1001 · 2022-03-08 20:48:05 发布

今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下：
一、电商网站倒计时
一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象-倒计时</title>
	</head>
	<body>
		<div id="countDown"></div>   <!--显示倒计时的区域-->
		<script type="text/javascript">
			function countDown(time) {
				var nowTime = +new Date(); //使用“+”运算符转换为数值型
				var inputTime = +new Date(time);
				if (nowTime <= inputTime) {
					var times = (inputTime - nowTime) / 1000;  //毫秒数，换算成秒
					var dd = parseInt(times / 60 / 60 / 24);  //剩余天数
					dd = dd < 10 ? '0' + dd : dd;
					var hh = parseInt(times / 60 / 60 % 24);  //剩余小时数
					hh = hh < 10 ? '0' + hh : hh;
					var mm = parseInt(times / 60 % 60);    //剩余分钟数
					mm = mm < 10 ? '0' + mm : mm;
					var ss = parseInt(times % 60);       //剩余秒数
					ss = ss < 10 ? '0' + ss : ss;
					document.getElementById("countDown").innerHTML=dd+'天'+hh+'时'+mm+'分'+ss+'秒';
				} else {
					clearInterval(countTime);
					document.getElementById("countDown").innerHTML = "活动已结束";
				}
			}
				var countTime=setInterval("countDown('2022-5-1 00:00:00')",1000);
		</script>
	</body>
</html>

二、输入指定的小时数倒计时
比如考试时间限定2小时，从2小时开始倒计时。运行时，弹出提示框，输入小时数。
在这里插入图片描述
运行效果

到时间后，停止，并弹出提示框“时间到”。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象-倒计时</title>
		<style type="text/css">
			#countDown{
				font-size:80px;
				text-align: center;
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="countDown"></div>
		<script type="text/javascript">
		  var duration=prompt("请输入小时数");
		  while (isNaN(duration)){
				duration=prompt("请输入小时数");
			}
		  var times=duration*60*60;    //小时数换算成秒数
			function countDown() {
				if(times>=0){
					var dd = parseInt(times / 60 / 60 / 24);
				  dd = dd < 10 ? '0' + dd : dd;
					var hh = parseInt(times / 60 / 60 % 24);
					hh = hh < 10 ? '0' + hh : hh;
					var mm = parseInt(times / 60 % 60);
					mm = mm < 10 ? '0' + mm : mm;
					var ss = parseInt(times % 60);
					ss = ss < 10 ? '0' + ss : ss;
					if(dd==0){
					document.getElementById("countDown").innerHTML="距离结束还有</br>"+hh+'时'+mm+'分'+ss+'秒';
					}else{
					document.getElementById("countDown").innerHTML="距离结束还有</br>"+dd+'天'+hh+'时'+mm+'分'+ss+'秒';
					}
					--times;        //每执行一次，秒数-1
		}else{
			alert("时间到！");
			clearInterval(timer);
		}
		}
		timer=setInterval("countDown()",1000);
		</script>

	</body>
</html>