vue中使用JS實現倒計時功能
阿新 • • 發佈:2020-10-07
一、倒計時功能
將剩餘的時間顯示出來,反饋給使用者,每過1s,剩餘的時間也減少1s
二、html中
<div style="position: fixed; top: 0; right:0; color:red">
<span class="el-icon-time">{{ timeDay }}m{{ time }}s</span>
</div>
三、javascript中
//vue的data data() { return { newTime: '2020-9-21 16:12:00', timeOut: '', timeSave: '', time: '', timeDay: '' } }
//method中的方法 setTime() { this.timeOut = setInterval(() => { setTimeout(() => { //newtime是倒計時的結束時間,當前時間和newTime指定的時間相同時,倒計時為0,即倒計時結束 const timedate = new Date(this.newTime) const now = new Date() const date = timedate.getTime() - now.getTime() const time = Math.ceil(date / 1000) % 60 const timeDay = Math.ceil(date / (1000 * 60)) - 1 this.time = time > 0 ? time : 0 this.timeDay = timeDay > 0 ? timeDay : 0 }, 0) }, 1000) },