JS：倒计时实现

最新推荐文章于 2024-06-13 10:31:50 发布

Code_Samurai

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量99

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/qq_37432828/article/details/111089329

版权

JS：倒计时实现

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>时间/倒计时</title>
	<link rel="stylesheet" type="text/css" href="../css/time.css">
</head>
<body onload="countTime()">
	<div class="d2">
		距离考研还有：<br>
		<span id="_d">00</span>
		<span id="_h">00</span>
		<span id="_m">00</span>
		<span id="_s">00</span>
		<br>
		<p><b><em>请珍惜宝贵的时间！</em></b></p>
	</div>
</body>
</html>
<script type="text/javascript">
function countTime(){
	//获取当前时间
	var date = new Date();
	var now = date.getTime();
	//设置截止时间
	var str="2021/12/26 12:00:00";
	var endDate = new Date(str);
	var end = endDate.getTime();
	//时间差
	var leftTime = end-now;
	//定义变量 d,h,m,s保存倒计时的时间
	var d,h,m,s;
	if(leftTime >= 0){
		d = Math.floor(leftTime/1000/60/60/24);
		h = Math.floor(leftTime/1000/60/60%24);
		m = Math.floor(leftTime/1000/60%60);
		s = Math.floor(leftTime/1000%60);
	}
	//将倒计时赋值到div中
	document.getElementById('_d').innerHTML = d+"天";
	document.getElementById('_h').innerHTML = h+"时";
	document.getElementById('_m').innerHTML = m+"分";
	document.getElementById('_s').innerHTML = s+"秒";
	//递归每秒调用countTime方法，显示动态时间效果
	setTimeout(countTime,1000);
}
</script>

Code_Samurai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS：倒计时实现

JS：倒计时实现代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>时间/倒计时</title> <link rel="stylesheet" type="text/css
复制链接

扫一扫