var moduleViewModel;
avalon.ready(function() {
moduleViewModel = new Vue({
el: "#ViewModel",
data: {
timeLength: 3659,
hour:0,
minute:0,
second:0,
},
mounted() {
this.Time(); //调用定时器
},
methods:{
showTime: function () {
if(this.data.TimeLength == 0) {
this.hour = "00";
this.minute = "00";
this.second = "00";
return;
}
var timeLength = this.data.TimeLength;//考试时长,单位 秒
//计算小时数
var h = Math.floor(timeLength / 3600);
//如果小时数小于10,要变成 0 + 数字的形式
this.hour = h < 10 ? "0" + h : h;
//计算分钟数
var m = Math.floor((timeLength - h * 3600) / 60);
//如果分钟数小于10,要变成 0 + 数字的形式
this.minute = m < 10 ? "0" + m : m;
//秒数
var s = timeLength - h * 3600 - m * 60;
//如果秒钟数小于10,要变成 0 + 数字的形式
this.second = s < 10 ? "0" + s : s;
},
//定时器每过1秒参数减1
Time() {
setInterval(() => {
this.seconds -= 1;
this.TimeLength -=1;
this.showTime();
}, 1000);
},
}
});
});
这篇博客介绍了如何在Vue.js应用中实现时间倒计时功能。通过创建Vue实例,设置初始时间长度,利用`setInterval`进行定时更新,并在`showTime`方法中计算并格式化小时、分钟和秒数。示例代码展示了如何动态更新组件状态来实时显示倒计时。
618

被折叠的 条评论
为什么被折叠?



