倒计时案例解析:
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)
}