Ajax當中json的用法
阿新 • • 發佈：2021-12-17
<template>
<div class="countDown">
<div v-if="!isCountDownOver">
<span class="time">{{ countDownD }}</span>
<span class="time">{{ countDownHour }}</span>
<span class="time">{{ countDownMinutes }}</span>
<span class="time">{{ countDownSeconds }}</span>
</div>
<div v-else class="timeOver">{{ LANG.test1.desc271 }}</div>
</div>
</template>
<script>
export default {
name: "countDown",
data() {
return {
isCountDownOver: false,
countDownD: "00",
countDownHour: "00",
countDownMinutes: "00",
countDownSeconds: "00",
};
},
mounted() {
this.timer();
},
methods: {
// 時間格式化
timeFormat(param) {
return param < 10 ? "0" + param : param;
},
// 倒計時功能
timer() {
// new Date() 可自定義為搶購時間
let failTime = new Date("2021-12-25 00:00:00").getTime() + 1 * 60 * 1000; //到期時間
let nowTime = new Date().getTime(); // 當前時間
let leftTime = failTime - nowTime;//剩餘時間
let interval = setInterval(() => {
let timeObj = {};
leftTime = leftTime - 1000;
if (leftTime > 0) {
let d= parseInt(leftTime / 1000 / 60 / 60 / 24);
let hour = parseInt((leftTime / 1000 / 60 / 60) % 24);
let minutes = parseInt((leftTime / 1000 / 60) % 60);
let seconds = parseInt((leftTime / 1000) % 60);
timeObj = {
d: this.timeFormat(d),
hour: this.timeFormat(hour),
minutes: this.timeFormat(minutes),
seconds: this.timeFormat(seconds),
};
} else {
this.isCountDownOver = true;
clearInterval(interval); // 清除定時器
}
this.countDownD=timeObj.d;
this.countDownHour = timeObj.hour;
this.countDownMinutes = timeObj.minutes;
this.countDownSeconds = timeObj.seconds;
}, 1000);
},
},
};
</script>
<style lang="less" scoped>
.countDown {
width:100%;
font-size: .25rem;
margin: .1rem auto;
}
.countDown .title {
font-weight: 700;
color: #ffffff;
margin-right: .05rem;
}
.countDown .time {
background-color: #2d67a3;
color: #fff;
margin: 0 .02rem;
padding: 0 .05rem;
border-radius: .03rem;
}
.timeOver {
text-align: center;
font-weight: 700;
color: #ffffff;
}
</style>