商城倒计时

小程序商城倒计时实现

页面多个定时器

首先在data中定义如下值

然后方法如下

	  countDownFun(item, time) {
	　　time--; //时间一秒秒的减
	　　let nowTime = new Date().getTime(); //现在时间
	　　if (nowTime <= time) {
	　　　//获取时间差
	  　　let timediff = Math.round((time - nowTime) / 1000);
	  　　//获取还剩多少天
	  item.day = parseInt(timediff / 3600 / 24);
	  　　//获取还剩多少小时
	  item.hour = parseInt((timediff / 3600) % 24);
	  　　//获取还剩多少分钟
	  item.minute = parseInt((timediff / 60) % 60);
	  return item
	  // 　　//获取还剩多少秒
	  // 　　let second = timediff % 60;
	  // 　　return day + "天" + hour + "小时" + minute + "分" + second + "秒";
	　　} else {
	　　　　return "00天00小时00分00秒";
	　　}
	},

    loop() {
        this.dataList = []
　　　　　　this.list.forEach((item, index) => {
            let thisTime = item.offShelfTime;
            thisTime = thisTime ? thisTime.replace(/-/g, '/') : "";
            var time = new Date(thisTime).getTime();
            this.countDownFun(item, time)
            let arr = JSON.parse(JSON.stringify(item))
            this.dataList.push(arr)
　　　　　　});
    },
    
        timer() {
　　　　　　//页面多个定时器
　　　　　　this.temp = setInterval(() => {
            this.loop()
　　　　　　}, 1000 * 60);
　　  },

页面加载就调用

  created() {
    this.timer();
    this.loop();
  },

这样之后 在页面循环遍历dataList 就可以显示倒计时的效果

• 这样是为了方便后期样式调整 最后展示效果