20行代码的倒计时

HTML结构

	<div id="clockdiv">
	    Days: <span class="days"></span><br>
	    Hours: <span class="hours"></span><br>
	    Minutes: <span class="minutes"></span><br>
	    Seconds: <span class="seconds"></span>
	</div>

JS代码

// 给定一结束时间
		var timeline = ‘Mon Aug 15 2016 19:09:18 GMT+0800‘;

		// 获取时间函数 / Date.parse将时间转换成毫秒数
		function getTime(endtime) {
			var t = Date.parse(endtime) - Date.parse(new Date()); //转换成毫秒
			var second = Math.floor(t/1000 % 60); //转换成秒
			var minutes = Math.floor(t/1000/60 % 60); //转换成分钟
			var hours = Math.floor(t/1000/60/60 % 24); //转换成小时
			var day = Math.floor(t/1000/60/60/24); //转换成天
			return {
				‘total‘: t,
				‘second‘: second,
				‘minutes‘: minutes,
				‘hours‘: hours,
				‘day‘: day
			}  //把时间全部返回
		}

		//时间显示成内容函数
		function clockfn(id,endtime) {
			function getHtml() {
				var t = getTime(endtime); //活的时间函数中的时间
				var clock = document.getElementById(id),
					daySpan = clock.querySelector(‘.days‘),
					hoursSpan = clock.querySelector(‘.hours‘),
					minutesSpan = clock.querySelector(‘.minutes‘),
					secondsSpan = clock.querySelector(‘.seconds‘);
				//用时间赋值到倒计时内容
				daySpan.innerHTML = t.day;
				hoursSpan.innerHTML = t.hours;
				minutesSpan.innerHTML = t.minutes;
				secondsSpan.innerHTML = t.second;
				//倒计时到， 清楚定时器
				if(t.total <= 0) {
					clock.innerHTML = ‘时间到‘;
					timer = null;
				}
			}
			//先云清一次内容 / 不然定时器要1秒钟才开始运行，才会显示内容
			getHtml();
			var timer = setInterval(getHtml, 1000);

		}
		clockfn(‘clockdiv‘,timeline);  //运行

一个简单的倒计时， 简单的逻辑就是获得分/秒/等的时间    然后将里面的结构替换成获取的时间    用定时器控制其显示隐藏。