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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
JS实现的雪花飘落特效示例
Dec 03 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
我的论坛源代码(二)
2006/10/09 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
python 实现插入排序算法
2012/06/05 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
工程专业应届生求职信
2014/02/19 职场文书
2015年党性分析材料
2014/12/19 职场文书
教务处教学工作总结
2015/08/10 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL