原生js、计时器实现倒计时

原生js、计时器实现倒计时

1.Demo展示( 时间差：now—2月28号00:00 )：

2 . Html布局：

	<div class="wrap">
		<div class="times">
			<span class="day">span>天
			<span class="hours">span>时
			<span class="minutes">span>分
			<span class="seconds">span>秒
		div>
	div>

3. css样式表：

	*{
		margin:0;
		padding:0;
		font-size:16px;
	}
  	
	.wrap{
		width:400px;
		height:100px;
		margin:50px auto;
	}

	.times{
		line-height:100px;
		text-align:center;
		background-color:#E0FFFF;
		box-shadow:0 0 3px blue;
	}
	
	.times .day,
	.times .hours,
	.times .minutes,
	.times .seconds
	{
		width:40px;
		height:40px;
		display:inline-block;
		background-color:Violet;
		line-height:40px;
		box-shadow:0 0 3px #ccc;
	}

	.times .hours,
	.times .minutes,
	.times .seconds
	{
		margin-left:10px;
	}
 

4. 原生js代码：

window.onload = function(){
		var times = document.querySelector(".times");
		var inner = times.getElementsByTagName("span");
		
		//设置定时器;
		var timer = null;
		function setTimer(){
			timer = setInterval(timesPlay,1000);
		}
		setTimer();
		
		function cancleTimer(){
			clearInterval(timer);
		}

		//时间自动跳转函数;
		function timesPlay(){
		
		//结束时间;
		var endTime = new Date("2019/2/28 00:00:00");
		
		//现在时间;
		var now = new Date();
		
		//时间差:总的秒数(1000毫秒等于1秒);
		var lastTime = parseInt((endTime - now)/1000);
			if(lastTime != 0){
				//时间转换;
				var day = parseInt((lastTime / 60 / 60 / 24 % 24));
				var hour = parseInt((lastTime / 60 / 60 % 24));
				var min = parseInt((lastTime / 60 % 60));
				var sec = parseInt((lastTime % 60));
				//将获得的时分秒嵌入到相应的盒子中;
				inner[0].innerHTML = day;
				inner[1].innerHTML = hour;
				inner[2].innerHTML = min;
				inner[3].innerHTML = sec;
			}else{
				cancleTimer();
			}
		}
	}

注–步骤实现：

• 获取元素的引用；

• 利用时间日期函数来计算出间隔的时间差，最后进行时间换算；

• 把换算的时间通过innerHTML插入到对应区域；

• 计时器的使用和清除( 倒计时一秒执行一次，所以向计时器里传入的数值为1000，1000毫秒==1秒 )：
  setInterval();
  clearInterval();

• 函数的调用（ 注意作用域即可 ）；

~如遇错误，欢迎指正；

• 结束语…………………………福利时间到………………………………

  大家同为程序员，在这里给大家真诚的送上福利。

  福利链接点击这里！