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 相关文章推荐
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python模块的加载讲解
2019/01/15 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python3.7 的新特性详解
2019/07/25 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python对文件的操作方法汇总
2020/02/28 Python
哪些是python中web开发框架
2020/06/17 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
高中的自我鉴定
2013/12/16 职场文书
分层教学实施方案
2014/03/19 职场文书
植树造林的宣传标语
2014/06/23 职场文书
爱心募捐感谢信
2015/01/22 职场文书
外贸英文求职信范文
2015/03/19 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers