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>
    

      

  • 相关阅读:
    【团队作业冲刺'十日谈'】第七天——端侧部署6、记录保存
    团队冲刺第六天端侧部署5,模型下载功能2
    团队冲刺第五天端侧部署4,模型下载
    冲刺第四天 端侧部署3,登陆页面2
    冲刺第三天 端侧部署2,登录功能
    冲刺第二天模型训练2+端侧部署
    每日总结4.27
    每日总结4.26
    Jenkins基于https的k8s配置
    快速搭建私有gitlab
  • 原文地址:https://www.cnblogs.com/Uncle-Maize/p/6078472.html
Copyright © 2011-2022 走看看