vue实现验证码按钮倒计时功能


Posted in Javascript onApril 10, 2018

本人最近开始尝试学习vue.js。想使用vue写一个小例子,就选择做验证码按钮倒计时功能。

    上网上搜了一下,也把他们的代码试了一下,自己出了很多问题。所以,需要写一篇基础入门的文章,避免后面人采坑。

   这是按照网上写的HTML页面

<div class="register-pannel" id ="register-pannel"> 
      <div class="register-l" align="center"> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="邮箱/手机号/用户名" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="密码" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-lock form-control-feedback" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
          <input type="text" class="form-control" placeholder="手机号" style="height: 40px;" /> 
          <span class="glyphicon glyphicon-phone form-control-feedback" /> 
        </div> 
        <br /> 
        <div class="input-group" style="width: 300px;"> 
            <span class="register-msg-btn" v-show="show" v-on:click="getCode">发送验证码</span> 
            <span class="register-msg-btn" v-show="!show">{{count}} s</span> 
          <input type="text" class="form-control" placeholder="验证码" style="float: right; height: 40px; width: 150px;" /> 
          <span class="glyphicon glyphicon-font form-control-feedback" /> 
        </div> 
        <br /> 
        <span class="btn-register">注册</span> 
      </div>

js写成

<script> 
<span style="white-space: pre;">      </span>data(){   
<span style="white-space: pre;">      </span>return {   
<span style="white-space: pre;">        </span>show: true,   
<span style="white-space: pre;">        </span>count: '',   
<span style="white-space: pre;">        </span>timer: null,   
<span style="white-space: pre;">      </span>}  
<span style="white-space: pre;">    </span>},  
<span style="white-space: pre;">    </span>methods:{   
<span style="white-space: pre;">      </span>getCode(){    
<span style="white-space: pre;">        </span>const TIME_COUNT = 60;    
<span style="white-space: pre;">        </span>if (!this.timer) {     
<span style="white-space: pre;">          </span>this.count = TIME_COUNT;     
<span style="white-space: pre;">          </span>this.show = false;     
<span style="white-space: pre;">          </span>this.timer = setInterval(() => {     
<span style="white-space: pre;">            </span>if (this.count > 0 && this.count <= TIME_COUNT) {      
<span style="white-space: pre;">              </span>this.count--;      
<span style="white-space: pre;">            </span>} else {      
<span style="white-space: pre;">              </span>this.show = true;      
<span style="white-space: pre;">              </span>clearInterval(this.timer);      
<span style="white-space: pre;">              </span>this.timer = null;      
<span style="white-space: pre;">            </span>}     
<span style="white-space: pre;">          </span>}, 1000)     
<span style="white-space: pre;">        </span>}   
<span style="white-space: pre;">      </span>}   
<span style="white-space: pre;">    </span>} 
</script>

发现浏览器一直报错Uncaught SyntaxError: Unexpected token {

所以按照官方文档的格式,把js的结构改成

<script> 
    new Vue({ 
      el:'.register-pannel',      
      data:{    
        show:true,   
        timer:null, 
        count:'' 
      },  
      methods:{   
        getCode(){ 
          this.show = false; 
          const TIME_COUNT = 60;    
          if (!this.timer) {     
            this.count = TIME_COUNT;     
            this.show = false;     
            this.timer = setInterval(() => {     
              if (this.count > 0 && this.count <= TIME_COUNT) {      
                this.count--;      
              } else {      
                this.show = true;      
                clearInterval(this.timer);      
                this.timer = null;      
              }     
            }, 1000)     
          }   
        }   
      } 
    }); 
    </script>

于是格式是没有问题了,但是样式并没有生效。变成了另一个样子。

vue实现验证码按钮倒计时功能

上网上搜了很多。

有说是js引用顺序的问题。

有说是将js写进window.onload的。试了一下,发现都不对。

后来,在官方文档中发现了el属性:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。

所以改成

<script>
 new Vue({
  el:'.register-pannel', //注册div的class 
  data:{   
  show:true,  
  timer:null,
  count:''
  }, 
  methods:{  
  getCode(){
   this.show = false;
   const TIME_COUNT = 60;   
   if (!this.timer) {    
   this.count = TIME_COUNT;    
   this.show = false;    
   this.timer = setInterval(() => {    
    if (this.count > 0 && this.count <= TIME_COUNT) {     
    this.count--;     
    } else {     
    this.show = true;     
    clearInterval(this.timer);     
    this.timer = null;     
    }    
   }, 1000)    
   }  
  }  
  }
 });
</script>

效果就出来了。

vue实现验证码按钮倒计时功能

总结

以上所述是小编给大家介绍vue实现验证码按钮倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
angularJS提交表单(form)
Feb 09 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
bing Map 在vue项目中的使用详解
Apr 09 #Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
js使用递归解析xml
2014/12/12 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Django密码系统实现过程详解
2019/07/19 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
大二自我鉴定范文
2013/10/05 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
公司司机岗位职责
2014/02/07 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
保险公司演讲稿
2014/09/02 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
公司员工安全协议书
2014/11/21 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书