Vue实现倒计时
完整代码如下:<template><div><div class="cardBox"><div ><img class="erweiPhoto" src="../assets/img/微信图片_20201222170418.jpg"></div><div style="margin:5px 0 5px 0">{{"
·
完整代码如下:
<template>
<div>
<div class="cardBox">
<div >
<img class="erweiPhoto" src="../assets/img/微信图片_20201222170418.jpg">
</div>
<div style="margin:5px 0 5px 0">
{{"二维码剩余有效时间"+times+"秒"}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
times: 250, //倒计时250s,可以任意设定数字
}
},
created() {
this.getTime(); //只要该页面一渲染创建,就开始倒计时
},
methods:{
getTime() {
this.timer = setInterval(()=>{
this.times--
if(this.times===0){
clearInterval(this.timer)
}
},1000)
}
}
}
</script>
<style scoped>
.cardBox {
display: flex;
flex-direction: column;
justify-content: center;
width: 92%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
padding: 15px;
padding-top: 15px;
}
.erweiPhoto{
width: 220px;
}
</style>
效果如下:
更多推荐
已为社区贡献8条内容
所有评论(0)