vue自定义计时器效果图
直接码上
<template>
<div class="start-time">
<div>
<span>{
{
hour | checkedZero }}</span
>: <span>{
{
minute | checkedZero }}</span
>:
<span>{
{
second | checkedZero }}</span>
</div>
<button @click="clickStart">开始</button>
<button @click="stop">结束</button>
</div>
</template>
<script>
export default {
name: "start-time",
data() {
return {
starts: false,
times: null,
hour: 0,
minute: 0,
second: 0,
};
},
//组件方法
// props: {
// starts: Boolean,
// starts: false
//},
methods: {
clickStart() {
console.log("点击", this.starts);
this.starts = true;
},
stop() {
// 暂停
// this.starts = false;
// clearInterval(this.times);
//重0开始
this.starts = false;
clearInterval(this.times);
this.second = 0;
this.minute = 0;
this.hour = 0;
},
timggo() {
if (this.second > 60) {
this.minute++;
this.second = 0;
}
if (this.minute > 60) {
this.hour++;
this.minute = 0;
}
},
},
// 监听变量starts状态开始计时
watch: {
starts: function(newStatus, oldStatus) {
var that = this;
if (this.starts) {
that.times = setInterval(() => {
that.second++;
that.timggo();
console.log(this.second);
}, 10);
}
},
},
mounted() {
},
destroyed() {
clearInterval(this.times);
},
};
</script>
<style></style>
（这里有个过滤器是全局的，自己也可以写个方法）
let checkedZero = val => {
return val = val < 10 ? `0${
val}` : val
}
vue自定义倒计时效果图
码上
<template>
<div class="end-time">
<input
type="text"
placeholder="输入时间格式如2021/11/11"
v-model="inputTime"
/>
<button @click="endTime">开始倒计时</button>
剩余时间<span>{
{
time }}</span>
</div>
</template>
<script>
export default {
data() {
return {
time: "",
inputTime: "",
t: null,
};
},
created() {
},
methods: {
endTime() {
// 需清除，否则页面显示错乱
if (this.t) {
clearInterval(this.t);
}
this.coutTime(this.inputTime);
},
// 间隔一秒执行的方法
coutTime(strTime) {
this.t = setInterval(() => {
let now = new Date().getTime();
let remote = new Date(Date.parse(strTime.replace(/-/g, "/")));
let times = remote - now;
let d = Math.floor(times / 1000 / 60 / 60 / 24);
let h = Math.floor((times / 1000 / 60 / 60) % 24);
let m = Math.floor((times / 1000 / 60) % 60);
let s = Math.floor((times / 1000) % 60);
// ms = Math.floor(leftTime % 1000);
// ms = ms < 100 ? "0" + ms : ms
s = s < 10 ? "0" + s : s;
m = m < 10 ? "0" + m : m;
h = h < 10 ? "0" + h : h;
this.time = d + "天" + h + "小时" + m + "分钟" + s + "秒";
}, 1000);
},
},
beforeDestroy() {
clearInterval(this.t);
},
};
</script>
<style lang="scss"></style>