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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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实现异步数据调用的方法
2015/12/24 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript内存管理介绍
2015/03/13 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
wxPython学习之主框架实例
2014/09/28 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python常用外部指令执行代码实例
2020/11/05 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
《夏夜多美》教学反思
2014/02/17 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android