AngularJS 验证码60秒倒计时功能的实现
最近在做AngularJS 项目,这是写的一个60秒倒计时, angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval 。$timeout与$interval 可使绑定数据直接更新。
html
<a href="javascript:" rel="external nofollow" ng-click="sendphonecode(reg_phone)" ng-class="paraclass" ng-bind="paracont">获取验证码</a>
angularjs
angular.module('controllers', []).controller('registerCtrl', function($scope,$interval){ $scope.paracont = "获取验证码"; $scope.paraclass = "but_null"; $scope.paraevent = true; var second = 60, timePromise = undefined; timePromise = $interval(function(){ if(second<=0){ $interval.cancel(timePromise); timePromise = undefined; second = 60; $scope.paracont = "重发验证码"; $scope.paraclass = "but_null"; $scope.paraevent = true; }else{ $scope.paracont = second + "秒后可重发"; $scope.paraclass = "not but_null"; second--; } },1000,100); });
以上所述是小编给大家介绍的AngularJS 验证码60秒倒计时功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Angular.js实现获取验证码倒计时60秒按钮的简单方法
前言 本文主要介绍了关于Angular.js实现获取验证码倒计时60秒按钮的相关内容,关于这个功能相信不用多介绍,大家都不陌生,所以下面话不多说了,来一起看看实现的方法吧. 一.controller中代码 angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $scope.timer = fa
-
Ionic + Angular.js实现验证码倒计时功能的方法
前言 之前跟大家分享了关于 Android 原生实现验证码倒计时,地址是这里,现在公司使用 Ionic 开发的 App 也要实现类似的功能,现在也记录下来,供大家参考: 效果图: 正文 首先介绍下与本文相关的概念 $interval $interval 是 window.setInterval 的 Angular 包装形式,函数如果在没有被取消的时候会无限执行.(取消使用 cancel(promise) ) 用法: $interval(fn,delay,[count],[invokeApply]
-
ionic+AngularJs实现获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwin').directive('timerbutton', function($timeout, $interval){
-
AngularJS 验证码60秒倒计时功能的实现
最近在做AngularJS 项目,这是写的一个60秒倒计时, angularjs 与jq不同, 不是使用dom节点操作,而是数据操作,写倒计时,最好是使用$timeout与$interval ,不要使用settimeout与setinterval .$timeout与$interval 可使绑定数据直接更新. html <a href="javascript:" rel="external nofollow" ng-click="sendphone
-
Vue验证码60秒倒计时功能简单实例代码
template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q
-
简单实现vue验证码60秒倒计时功能
本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
-
jQuery实现发送验证码并60秒倒计时功能
本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma
-
Android实现点击获取验证码60秒后重新获取功能
本文实例为大家分享了Android实现点击获取验证码60秒后重新获取的具体代码,供大家参考,具体内容如下 上代码 /** * Created by Xia_焱 on 2017/5/7. */ public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param millisInFuture The number of millis in the future from
-
js代码实现点击按钮出现60秒倒计时
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
-
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
-
点击按钮出现60秒倒计时的简单js代码(推荐)
点击按钮出现60秒倒计时的简单js代码(推荐) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h
-
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta
-
Flutter之Timer实现短信验证码获取60s倒计时功能的代码
先看下效果: 两种需求场景: 1.广告页3s后跳转到首页 2.短信验证码60s倒计时 第一种的话,根据需求我们可以知道,我们想要的效果就是3s结束做出一个动作. factory Timer(Duration duration, void callback()) { if (Zone.current == Zone.root) { // No need to bind the callback. We know that the root's timer will // be invoked in
随机推荐
- PHP+JS+rsa数据加密传输实现代码
- redis实现加锁的几种方法示例详解
- java基于swing实现的连连看代码
- 100个不能错过的实用JS自定义函数
- 适用于WebForm Mvc的Pager分页组件C#实现
- PHP中使用匿名函数操作数据库的例子
- YII Framework框架教程之使用YIIC快速创建YII应用详解
- PHP构造二叉树算法示例
- c#文件下载示例的4种方法分享
- 用php实现gb2312和unicode间的编码转换
- JavaScript实现带有子菜单和控件的slider轮播图效果
- jQuery实现checkbox全选的方法
- Android 蓝牙自动匹配PIN码跳过用户交互示例
- mysqldump命令导入导出数据库方法与实例汇总
- JS正则表达式基本用法(经典全)
- 根据ID填充文本框的实例代码
- linux kernel 打印函数指针对应的函数名方法
- SpringBoot初始教程之统一异常处理详解
- JavaScript函数中关于valueOf和toString的理解
- 微信小程序用户自定义模版用法实例分析