前言
倒计时的功能相信大家在日常生活中都见到过，今天带大家用 vue 来实现这个小功能。
实现效果
html部分代码
<div class="biggestBox">
<div><input type="text" /></div>
<div v-if="isShow" :style="{background: msg == '' ? 'cornflowerblue' : '' }" @click="verification">获取验证码</div>
<div v-if="!isShow"><span>{{count}}</span> 秒</div>
</div>
data部分代码
data() {
return {
isShow: true, //通过 v-show 控制显示'获取按钮'还是'倒计时'
count: 0, //倒计时 计数器
msg: "", //如果msg为空是蓝色，点击之后变灰色
};
},
methods部分代码
methods: {
//点击事件
verification() {
this.isShow = false;//倒计时
this.count = 3; //赋值3秒
var times = setInterval(() => {
this.count--; //递减
if (this.count <= 0) {
// <=0 变成获取按钮
this.isShow = true;
clearInterval(times);
}
}, 1000); //1000毫秒后执行
},
},
css部分代码
<style scoped>
/* 最大的盒子 */
.biggestBox {
display: flex;
align-items: center;
padding: 20px;
}
/* input输入框 */
.biggestBox div:first-child input {
height: 24px;
border: none;
border-radius: 2px;
border: 1px solid rgb(185, 185, 185);
}
/* 获取验证码按钮 */
.biggestBox div:nth-child(2) {
width: 80px;
text-align: center;
margin-left: 10px;
background-color: rgb(172, 172, 172);
color: white;
padding: 6px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
</style>
完整代码
<template>
<div>
<div class="biggestBox">
<div><input type="text" /></div>
<div v-if="isShow" :style="{background: msg == '' ? 'cornflowerblue' : '' }" @click="verification">获取验证码</div>
<div v-if="!isShow"><span>{{count}}</span> 秒</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true, //通过 v-show 控制显示'获取按钮'还是'倒计时'
count: 0, //倒计时 计数器
msg: "", //如果msg为空是蓝色，点击之后变灰色
};
},
methods: {
verification() {
this.isShow = false;
this.count = 3; //赋值3秒
var times = setInterval(() => {
this.count--; //递减
if (this.count <= 0) {
// <=0 变成获取按钮
this.isShow = true;
clearInterval(times);
}
}, 1000); //1000毫秒后执行
},
},
};
</script>
<style scoped>
/* 最大的盒子 */
.biggestBox {
display: flex;
align-items: center;
padding: 20px;
}
/* input输入框 */
.biggestBox div:first-child input {
height: 24px;
border: none;
border-radius: 2px;
border: 1px solid rgb(185, 185, 185);
}
/* 获取验证码按钮 */
.biggestBox div:nth-child(2) {
width: 80px;
text-align: center;
margin-left: 10px;
background-color: rgb(172, 172, 172);
color: white;
padding: 6px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79446.html
![《从0到1：CTFer成长之路》书籍配套题目-[第一章 web入门]SQL注入-1](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading-480x300.gif)
