用js实现倒计时效果

最新推荐文章于 2022-02-22 14:46:21 发布

tfbyly

最新推荐文章于 2022-02-22 14:46:21 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： js javascript html

本文链接：https://blog.csdn.net/tfbyly/article/details/80261191

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”。
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>倒计时</title>
	</head>

	<body>
		<!--显示倒计时的div-->
		<div id="showTime"></div>
		<script>
			//输入一个倒计时开始时间
			var isTime = new Date('2018-06-7 00:00:00');
			var isMillis = isTime.getTime() - new Date().getTime();
			var showTime = document.getElementById('showTime');
			if(isMillis > 0) {
				//计算倒计时的函数
				function datetime() {
					isMillis = isTime.getTime() - new Date().getTime();
					var tian = Math.floor(isMillis / 1000 / 60 / 60 / 24);
					if(tian < 10) {
						hours = '0' + hours;
					}
					var hours = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000) / 1000 / 60 / 60);
					if(hours < 10) {
						hours = '0' + hours;
					}
					var minutes = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000) / 1000 / 60);
					if(minutes < 10) {
						minutes = '0' + minutes;
					}
					var seconds = Math.floor((isMillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000);
					if(seconds < 10) {
						seconds = '0' + seconds;
					}
					showTime.innerHTML = tian + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
				}
				datetime();
			} else {
				document.write('结束时间不正确！')
			}
			//每个一秒执行一次，实现倒计时的效果
			setInterval(datetime, 1000);
		</script>
	</body>

</html>

tfbyly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js实现倒计时效果

javascript实现倒计时效果网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时&lt;/title&gt; &lt;/h
复制链接

扫一扫