zoukankan      html  css  js  c++  java
  • 前端学习——ionic/AngularJs——获取验证码倒计时按钮

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

    代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview

    主要实现原理:点击后,设置一个$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)点击之后

      

    干货:

    <html  ng-app="myApp">
    	<head>
    		<title>测试_短信验证码</title>
    		<meta charset="utf-8" />
    	</head>
    	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"/>
    	<body>
    		<timerbutton show-timer="false">获取验证码</timerbutton> 
    	</body>
    </html>
    <script>
    	angular.module('myApp',[]).directive('timerbutton', function($timeout, $interval){
        return {
            restrict: 'AE',
            scope: {
                showTimer: '=',
                timeout: '='
            },
            link: function(scope, element, attrs){
                scope.timer = false;
                scope.timeout = 60000;
                console.log("1-进来了");
                scope.timerCount = scope.timeout / 1000;
                scope.text = "获取验证码";
    
                scope.onClick = function(){
                	console.log("2-进来了");
                    scope.showTimer = true;
                    scope.timer = true;
                    scope.text = "秒后重新获取";
                    var counter = $interval(function(){
                        scope.timerCount = scope.timerCount - 1;
                        console.log("3-进来了");
                    }, 1000);
    
                    $timeout(function(){
                    	console.log("进来了");
                        scope.text = "获取验证码";
                        scope.timer = false;
                        $interval.cancel(counter);
                        scope.showTimer = false;
                        scope.timerCount = scope.timeout / 1000;
                    }, scope.timeout);
                }
            },
            template: '<button ng-click="onClick()" class="btn btn-primary" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
        };
    });
    </script>
    

      

  • 相关阅读:
    实战体会Java的多线程编程
    java synchronized用法
    java thread代码
    java简单线程池实例代码
    visual studio 配色方案的设置及需注意的问题
    【转】 Response.Redirect(),Server.Transfer(),Server.Execute()的区别
    Button.PerformClick 仅支持winform,可模拟按钮点击
    Codeforces Round #118 (Div. 2) B题(Codeforces上不支持qsort,只支持sort!!!)
    hdu4324(拓扑排序&强连通)
    三分法——求解凸性函数的极值问题
  • 原文地址:https://www.cnblogs.com/Uncle-Maize/p/6078472.html
Copyright © 2011-2022 走看看