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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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之第七天
2006/10/09 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php实现文章评论系统
2019/02/18 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python必须了解的35个关键词
2020/07/16 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014年市场部工作总结
2014/11/25 职场文书
股份转让协议书范本
2015/01/27 职场文书
工程质量保证书
2015/05/09 职场文书
起诉状范本
2015/05/20 职场文书
钢琴师观后感
2015/06/12 职场文书