倒计时器

最新推荐文章于 2018-06-12 18:34:25 发布

Annlilawer

最新推荐文章于 2018-06-12 18:34:25 发布

阅读量775

点赞数

分类专栏： JS 文章标签：计时器

本文链接：https://blog.csdn.net/Anlilower/article/details/52604226

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果：

距离世园会开幕还有*天23:59:59

实现代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="flower"></div>
	<script>
		setInterval(function(){                 //设置周期型计时器
			var oNow = new Date();<span style="white-space:pre">		</span>//当前时间
			var oFuture = new Date();<span style="white-space:pre">	</span>//未来时间
			
			oFuture.setMonth(8,24);<span style="white-space:pre">		</span>//设置未来时间
			oFuture.setHours(8,0,0,0);
			
			var total = oFuture.getTime() - oNow.getTime();   //获得时间戳
			
			
			total = parseInt(total/1000);
			
			var D = parseInt(total/(60*60*24));
			total = total % (60*60*24);
			var H = parseInt(total/(60*60));
			total = total % (60*60);
			var M = parseInt(total/60);
			var S = total % 60;
			var ff = document.getElementById('flower');<span style="white-space:pre">	</span>//获取文本对象
			if (total<=0) {
				ff.innerHTML = '开幕啦';<span style="white-space:pre">		</span>//设置显示文本
			} else {
				ff.innerHTML = '距离唐山百花电影节还有'+ toDob(D) + '天' + toDob(H)+':' + toDob(M) + ':' + toDob(S) ; 
			}
			
		},1000)
		
		function toDob(num)
		{
			if (num < 10) {
				return '0'+ num;
			} else {
				return ''+ num;
			}
		}
		
	</script>
</body>
</html>