vue中 写过的几种倒计时总结
10秒倒计时(10秒钟后内容隐藏)<div v-if='contentShow'>尊敬的客户,您已进入投保流程,请您仔细阅读......</div>data() {return {contentShow: true}},created() {let n = 10;let inval = setInterval(() => {if(n === 0) {
·
10秒倒计时(10秒钟后内容隐藏)
<div v-if='contentShow'>
尊敬的客户,您已进入投保流程,请您仔细阅读......
</div>
data() {
return {
contentShow: true
}
},
created() {
let n = 10;
let inval = setInterval(
() => {
if(n === 0) {
this.contentShow = false
clearInterval(inval)
}else{
n--
}
},
1000
)
},
60秒倒计时 (短信验证码)
<div @click='getVarifyCode'>{{ varifyCodeText }}</div>
data() {
return {
varifyCodeText: '获取验证码',
//是否已经点击过获取验证码
isTrigger: false
}
},
methods: {
getVarifyCode() {
if (this.isTrigger) return
let n = 60;
let inval = setInterval(
() => {
if(n === 0) {
this.varifyCodeText = '重新获取验证码'
this.isTrigger = false
clearInterval(inval)
}else{
this.isTrigger = true
this.varifyCodeText = `${n--}秒后重发`
}
},
1000
)
}
}
10分钟倒计时(页面上展示用)
大概效果图: (10分钟后,倒计时模块从页面上移除.通过缓存实现再次点击进来,也不展示倒计时)
<div class='time-box wd-70 ht-20' v-if='timeShow'>
<div class='ht-20 wd-28 time'>0{{ minutes}}</div>
<div class='ht-20 wd-14 lh-20 fs-14 t-center'>:</div>
<div class='ht-20 wd-28 time'>{{secondsCom}}</div>
</div>
data() {
return {
minutes: 9,
seconds: 59,
timeShow: true,
}
},
created(){
this.add();
(JSON.parse(sessionStorage.getItem("timeShow")) === 'false') ? (this.timeShow = false): (this.timeShow = true) ;
},
computed: {
secondsCom(){
return this.seconds < 10 ? '0'+ this.seconds : this.seconds
},
},
methods: {
// 倒计时
add() {
var _this = this
var time = window.setInterval(function () {
if (_this.seconds === 0 && _this.minutes !== 0) {
_this.seconds = 59
_this.minutes -= 1
} else if (_this.minutes === 0 && _this.seconds === 0) {
_this.seconds = 0
_this.timeShow = false
window.clearInterval(time)
sessionStorage.setItem("timeShow",JSON.stringify('false'));
} else {
_this.seconds -= 1
}
}, 1000)
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)