Vue验证码60秒倒计时功能简单实例代码


Posted in Javascript onJune 22, 2018

template

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

script

<script>
 export default {
 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: 0 10px;
 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: 1px solid #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: 1px solid #09BB07;
  color: #09BB07;
  background: #fff;
  border-radius: 4px;
  outline: none;
  -webkit-appearance:none;
 }
 }
}
</style>

总结

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

Javascript 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
node.js命令行教程图文详解
May 27 Javascript
小程序实现录音功能
Sep 22 Javascript
js实现简单的轮播图效果
Dec 13 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 #Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
You might like
深入分析php中接口与抽象类的区别
2013/06/08 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
JS原型链怎么理解
2016/06/27 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
优秀毕业生推荐信
2013/11/02 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
法人授权委托书范本
2014/04/04 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
工地材料员岗位职责
2015/04/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书