主要是使用 setInterval(),clearInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
</head>
<style>
.get_code {
width: 80px;
height: 36px;
background: #000000;
color: #ffffff;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
padding: 4px 8px;
cursor: pointer;
}
</style>
<body>
<div id='app'>
<div class="get_code" @click="getCode">{{SendCode_text}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script>
var Vue = new Vue({
el: '#app',
data: {
SendCode_text: '获取验证码',
time_count: 60,
timer: null,
},
created() {
},
methods: {
getCode() {
let that = this
if (!that.timer) {
that.timer = setInterval(() => {
if (that.time_count > 0) {
that.time_count--
that.SendCode_text = '重新发送' + that.time_count + 's'
} else {
that.SendCode_text = '获取验证码'
clearInterval(that.timer)
that.timer = null
that.time_count = 60
}
}, 1000)
}
},
}
})
</script>
</html>
