原生js实现简单的倒计时效果

在页面中，我们经常有可能会遇到倒计时效果，下边就是一个简单的倒计时，用到的主要知识在于对Date对象的getTime()方法及setInterval定时器的运用，希望可以为你带来参考。

html部分

<p id="count">倒计时：<span></span>天<span></span>时<span></span>分<span></span>秒</p>

js部分

<script>
		var end = new Date("2019-1-1"); //设置目标时间
		var oSpan = document.getElementsByTagName("span");  //获取盛放倒计时数据的容器
		
		setInterval(function(){  //设置定时器，一秒钟更新一次
			var now = new Date(); //获取现在的时间
			var times = parseInt(diff(now,end));
			var _d = parseInt(times/(3600*24)); //天
			var _h = parseInt(times%(3600*24)/3600); //时
			var _m = parseInt((times%3600)/60); //分
			var _s = parseInt(times%60); //秒

			oSpan[0].innerHTML = toTwo(_d); 
			oSpan[1].innerHTML = toTwo(_h);
			oSpan[2].innerHTML = toTwo(_m);
			oSpan[3].innerHTML = toTwo(_s);
		},1000)
		
		function diff(start,end){  //获取现在时间和目标时间的时间差（单位/秒）
			return (end.getTime() - start.getTime())/1000; //getTime()返回从1970年1月1日到目前时间的毫秒数
		}
		function toTwo(num){
			return num<10 ? "0"+num : num; //三目运算符，时间是个位数的，前边补0
		}
	</script>