移动端秒杀倒计时功能

倒计时功能思路:

1. 获取倒计时的时间 = 秒杀时间 - 当前时间
   求得时间戳, 单位毫秒, 让时间戳/1000 取整, 才是秒数
2. 将秒数, 转换成时分秒
3. 设置时分秒到页面span里
4. 添加定时器, 不断倒计时

;(function() {

// 1. new Date(时间戳)

// 2. new Date(时间字符串)
// (1) new Date(“2018-10-17 14:00”);
// 有兼容性问题, ios不支持带 - 的日期格式
/// 只是移动端必然会遇到的兼容性问题,
// (有时候后台, 会给你传 2018-10-17 这样的格式, 就需要转换)
// (2) new Date(“2018/10/17 14:00”);

// 获取元素
var spans = document.querySelectorAll(".seckill_title .time span:nth-child(2n+1)");

// 模拟后台传递的时间字符串
var timeStr = “2018-10-18 12:28”;
// 将所有 - 替换成 /, 需要在正则后面加 g
timeStr = timeStr.replace(/-/g, “/”);
// 秒杀时间
var seckillTime = new Date(timeStr);

// 一进来直接调用一次
setTime();
// 开启定时器, 开始倒计时
var timer = setInterval(setTime, 1000);
function setTime() {

// 实时获取当前时间
var now = new Date();
// 倒计时的秒数
var time = parseInt( (seckillTime - now) / 1000 );

if ( time <= 0 ) {
  // 清除定时器, 让 time 归 0
  time = 0;
  clearInterval( timer );
}
// 将秒数转换成时分秒
var hours = parseInt( time / 3600 );  // 求得所有的小时数, 向下取证
var minites = parseInt( time / 60 ) % 60; // 求得所有分钟数, 超出60的部分进位了, 不管
var seconds = time % 60; // 直接对 60取余数, 超出60的部分进位了, 不管

//console.log( hours + ":" + minites + ":" + seconds );

// 设置给 span
spans[0].innerHTML = addZero(hours);
spans[1].innerHTML = addZero(minites);
spans[2].innerHTML = addZero(seconds);

}
// 封装一个小方法, 专门用于给不足10的数字加0
function addZero( n ) {
return n < 10 ? “0” + n : n;
}
})();