前端JS案例（一）：倒计时

倒计时案例解析：

1、设置var timeId = setInterval(function(){},时间毫秒); 通常为每隔1000毫秒执行一次。

2、在函数中设置if条件，在某种情况下清除timeId，clearInterval(timeId);

3、如下所示设置小时、分钟、秒

      var totalSec = 3*60*60;

      var hour = Math.floor(totalSec / 3600);

      var minute = Math.floor(totalSec % 3600 /60);

      var sec =totalSec % 60;

4、通过innerHTML填入指定的元素中，实现倒计时效果。

function cutDownTime() {
	// 定义 总时间 写时间时 建议 这样写
	var totalHour = 3 ;

	// 转化为秒
	var totalSec = 3*60*60;

	// 加多一秒 让用户看到的时候 是从整数 开始
	// totalSec++;
	// var totalSec = 5;

	// 获取 想要修改的所有li标签
	// querySelectorAll  querySelector 这两个方法 可以传入 css,css3 中的选择器
	// 如果想要自己封装一个 类似于jq的东西 可以再内部 调用 这两个方法
	var liArr = document.querySelectorAll('.main_content:nth-child(1) .content_top li');
	// console.log(liArr);

	// 开启 定时器
	// 有了 定时器id 以后 就能够 干掉该id 对应的 定时器
	var timeId = setInterval(function () {

		// 0 判断 是否 小于0了
		if (totalSec<=0) {
			// 干掉 定时器
			clearInterval(timeId);

			console.log('结束啦,你买不到了哦');

			return;
		}

		// 1递减
		totalSec--;

		// 当前的秒 对应到 多少小时 多少分 多少秒
		var hour = Math.floor(totalSec / 3600);
		var minute = Math.floor(totalSec % 3600 /60);
		var sec =totalSec % 60;


		// 2修改dom元素显示

		// 小时
		liArr[0].innerHTML =Math.floor(hour/10) ;  // 十位 41 / 10  =4.1 所以要取整数
		liArr[1].innerHTML =hour%10 ; // 个位

		// 分
		liArr[3].innerHTML = Math.floor(minute/10);// 是为 55/10 = 5.5 取整
		liArr[4].innerHTML = minute%10;

		// 秒
		liArr[6].innerHTML = Math.floor(sec/10); 
		liArr[7].innerHTML = sec%10; 



	},1000)
}