基于vue的短信验证码倒计时demo


Posted in Javascript onSeptember 13, 2017

最近做了一个小的demo,分享给大家,在很多地方都能用到。

一般获取短信验证码的时候会用到这个demo:

基于vue的短信验证码倒计时demo

button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:

<div id="example">
  <button @click="send">
   <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
   <span v-if="!sendMsgDisabled">send</span>
  </button>
 </div>
button {
  width: 100px;
  height: 50px background: pink;
 }
var vm = new Vue({
  el: '#example',
  data() {
   return {
    time: 60, // 发送验证码倒计时
    sendMsgDisabled: false
   }
  },
  methods: {
   send() {
    let me = this;
    me.sendMsgDisabled = true;
    let interval = window.setInterval(function() {
     if ((me.time--) <= 0) {
      me.time = 60;
      me.sendMsgDisabled = false;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
小程序如何使用分包加载的实现方法
May 22 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
BootStrap数据表格实例代码
Sep 13 #Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
输出控制类
2006/10/09 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python 图片验证码代码
2008/12/07 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python字典改变value值方法总结
2019/06/21 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
pycharm安装及如何导入numpy
2020/04/03 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
出国导师推荐信
2014/01/16 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
怎样写家长意见
2015/06/04 职场文书
春季运动会加油词
2015/07/18 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
2016寒假假期总结
2015/10/10 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript