ionic+AngularJs实现获取验证码倒计时按钮


Posted in Javascript onApril 22, 2017

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-60秒后重新获取。

主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中。设置一个$timeout,60秒后将按钮初始化到可用状态。

实现代码:

(1)js代码,设置成一个directive以便多次调用。

angular.module('winwin').directive('timerbutton', function($timeout, $interval){
  return {
    restrict: 'AE',
    scope: {
      showTimer: '=',
      timeout: '='
    },
    link: function(scope, element, attrs){
      scope.timer = false;
      scope.timeout = 60000;
      scope.timerCount = scope.timeout / 1000;
      scope.text = "获取验证码";

      scope.onClick = function(){
        scope.showTimer = true;
        scope.timer = true;
        scope.text = "秒后重新获取";
        var counter = $interval(function(){
          scope.timerCount = scope.timerCount - 1;
        }, 1000);

        $timeout(function(){
          scope.text = "获取验证码";
          scope.timer = false;
          $interval.cancel(counter);
          scope.showTimer = false;
          scope.timerCount = scope.timeout / 1000;
        }, scope.timeout);
      }
    },
    template: '<button on-tap="onClick()" class="button button-calm xgmm-btn" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
  };
});

(2)html代码

<timerbutton show-timer="false">获取验证码</timerbutton>

实现效果:

(1)点击之前

ionic+AngularJs实现获取验证码倒计时按钮

(2)点击之后

ionic+AngularJs实现获取验证码倒计时按钮 

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

Javascript 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
在node中如何使用 ES6
Apr 22 #Javascript
JS实现异步上传压缩图片
Apr 22 #Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 #Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
简单的用PHP编写的导航条程序
2006/10/09 PHP
openPNE常用方法分享
2011/11/29 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
javascript中的隐式调用
2018/02/10 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python 排列组合之itertools
2013/03/20 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
django使用html模板减少代码代码解析
2017/12/12 Python
pyhton列表转换为数组的实例
2018/04/04 Python
django中forms组件的使用与注意
2019/07/08 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
python实现图像外边界跟踪操作
2020/07/13 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
个人安全生产承诺书
2014/05/22 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android