扣丁学堂HTML5在线教程Vue验证码60秒倒计时功能简单实例代码

2018-06-25 13:34:41 676浏览

今天扣丁学堂HTML5在线教程给大家主要介绍关于Vue验证码60秒倒计时功能简单实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

template

　　<template>
　　<divclass='login'>
　　<divclass="loginHeader">
　　<inputtype="tel"class="loginBtnborder-bottom"placeholder="请输入手机号"/>
　　<inputtype="tel"class="codeBtn"placeholder="请输入验证码"/>
　　<inputtype="button"class="getNumber"v-model="codeMsg"@click="getCode":disabled="codeDisabled"/>
　　</div>
　　</div>
　　</template>

script

　　<script>
　　exportdefault{
　　data(){
　　return{
　　//是否禁用按钮
　　codeDisabled:false,
　　//倒计时秒数
　　countdown:60,
　　//按钮上的文字
　　codeMsg:'获取验证码',
　　//定时器
　　timer:null
　　}
　　},
　　methods:{
　　//获取验证码
　　getCode(){
　　//验证码60秒倒计时
　　if(!this.timer){
　　this.timer=setInterval(()=>{
　　if(this.countdown>0&&this.countdown<=60){
　　this.countdown--;
　　if(this.countdown!==0){
　　this.codeMsg="重新发送("+this.countdown+")";
　　}else{
　　clearInterval(this.timer);
　　this.codeMsg="获取验证码";
　　this.countdown=60;
　　this.timer=null;
　　this.codeDisabled=false;
　　}
　　}
　　},1000)
　　}
　　}
　　}
　　}
　　</script>

css（scss写法）

　　<style>
　　.login{
　　width:100%;
　　height:100%;
　　background:#F9F9F9;
　　.loginHeader{
　　padding:010px;
　　background:#fff;
　　margin-top:20px;
　　overflow:hidden;
　　.loginBtn{
　　width:100%;
　　height:42px;
　　border:none;
　　background:#fff;
　　color:#444;
　　border-radius:4px;
　　outline:none;
　　padding-left:3px;
　　font-size:1.4rem;
　　box-sizing:border-box;
　　-webkit-appearance:none;
　　}
　　.border-bottom{
　　border-bottom:1pxsolid#F3F3F3;
　　}
　　.codeBtn{
　　width:63%;
　　height:42px;
　　border:none;
　　background:#fff;
　　color:#444;
　　border-radius:4px;
　　float:left;
　　outline:none;
　　padding-left:3px;
　　font-size:1.4rem;
　　box-sizing:border-box;
　　-webkit-appearance:none;
　　}
　　.getNumber{
　　width:35%;
　　height:36px;
　　float:right;
　　margin-top:3px;
　　border:1pxsolid#09BB07;
　　color:#09BB07;
　　background:#fff;
　　border-radius:4px;
　　outline:none;
　　-webkit-appearance:none;
　　}
　　}
　　}
　　</style>

总结

以上所述是小编给大家介绍的Vue验证码60秒倒计时功能简单实例代码，希望对大家有所帮助，最后想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的HTML5在线视频供学员观看学习，想要学好HTML5开发的小伙伴快快行动吧。扣丁学堂H5技术交流群：559883758。

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>