vue項目中事項顯示秒殺倒計時效果-限定開始和結束時間

頁面結構 

<!-- 限時秒殺 -->
<div class="left">
<p class="txt1">限時秒殺</p>
<p class="txt2">{{ !seckill.title ? '每天零點場 好貨秒不停' : seckill.title }}</p>
<div v-if="seckill.length !== 0">
<p class="txt3">
  <span>{{h}}</span>
  <i>:</i>
  <span>{{m}}</span>
  <i>:</i>
  <span>{{s}}</span>
  <b>秒殺</b>
</p>
<img :src="seckill.img" @click="$router.push('/detail/'+seckill.goodsid)" />
</div>
<div class="nul" v-else>
<i class="iconfont icon-rocketspacebus"></i>
<h2>暫無秒殺商品</h2>
</div>
<span v-show="seckill.length == null">
<!-- <i>¥</i> -->
{{seckill.price | formatPrice()}}
</span>
</div>

處理函數過程

// 驗證秒殺開始時間是否過期
if (
new Date().getTime() >= parseInt(this.seckill["begintime"]) &&
new Date().getTime() <= parseInt(this.seckill["endtime"])
) {
// 在開始和結束時間範圍內
console.log(
  new Date().getTime() >= parseInt(this.seckill["begintime"])
);
console.log(
  new Date().getTime() <= parseInt(this.seckill["endtime"])
);
// 計算當前時間 - 結束時間
let time = Math.abs(new Date().getTime() - parseInt(this.seckill["endtime"]));
//轉成秒
time /= 1000;
// 天
let d = parseInt(time / 86400);
// 時
let h = parseInt((time % 86400) / 3600);
// 分
let m = parseInt((time % 3600) / 60);
// 秒
let s = parseInt(time % 60);
let t = setInterval(() => {
  s--;
  if (s < 0) {
	m--;
	s = 59;
  }
  if (m < 0) {
	h--;
	m = 59;
  }
  if (h < 0) {
	d--;
	h = 23;
  }
  if (d < 0) {
	d = h = m = s = 0;
	clearInterval(t); //清除定時器
  }
  this.h = h < 10 ? "0" + h : h;
  this.m = m < 10 ? "0" + m : m;
  this.s = s < 10 ? "0" + s : s;
  // console.log(d, h, m, s, 111111);
}, 1000);
} else {
console.log('秒殺過期');
this.seckill = [];
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章