ionic+AngularJs实现获取验证码倒计时按钮
更新时间:2017年4月27日 10:00 点击:2627
按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-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)点击之前
(2)点击之后
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
- 这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- 这篇文章主要介绍了jquery实现倒计时效果,根据设计一个游戏引出的倒计时功能,需要的朋友可以参考下...2015-12-16
- 这篇文章主要介绍了JS实现倒计时,精确到天数、时、分、秒,还为大家分享了parseInt() 函数的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24
- 这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24
- 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下...2016-10-03
- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01
- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JQuery实现的按钮倒计时效果,涉及jQuery结合时间函数动态修改按钮属性的相关技巧,需要的朋友可以参考下...2015-12-25
- 本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。...2017-03-13
- 这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下...2016-02-21
- 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下...2016-04-23
- 这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28