热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。

按钮功能为:点击“获取验证码”——按钮不可用-设置倒计时-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: ''
  };
});

(2)html代码

 获取验证码

实现效果:

(1)点击之前

  

(2)点击之后

   

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


推荐阅读
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • PHP 过滤器详解
    本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
  • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
  • 给定行数 numRows,生成帕斯卡三角形的前 numRows 行。例如,当 numRows 为 5 时,返回的结果应为:[[1], [1, 1], [1, 2, 1], [1, 3, 3, 1], [1, 4, 6, 4, 1]]。 ... [详细]
  • 本文介绍如何在华为CE交换机上配置M-LAG(多链路聚合组),以实现CE1和CE2设备作为VLAN 10网关的高可用性。通过详细的配置步骤,确保网络冗余和稳定性。 ... [详细]
  • 解决SVN图标显示异常问题的综合指南
    本文详细探讨了SVN图标无法正常显示的问题,并提供了多种有效的解决方案,涵盖不同环境下的具体操作步骤。通过本文,您将了解如何排查和修复这些常见的SVN图标显示故障。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 本文介绍如何将自定义项目设置为Tomcat的默认访问项目,使得通过IP地址访问时直接展示该自定义项目。提供了三种配置方法:修改项目路径、调整配置文件以及使用WAR包部署。 ... [详细]
  • 算法题解析:最短无序连续子数组
    本题探讨如何通过单调栈的方法,找到一个数组中最短的需要排序的连续子数组。通过正向和反向遍历,分别使用单调递增栈和单调递减栈来确定边界索引,从而定位出最小的无序子数组。 ... [详细]
  • 本文深入探讨了线性代数中向量的线性关系,包括线性相关性和极大线性无关组的概念。通过分析线性方程组和向量组的秩,帮助读者理解这些概念在实际问题中的应用。 ... [详细]
  • 本文介绍如何在 C++ 中使用链表结构存储和管理数据。通过具体示例,展示了静态链表的基本操作,包括节点的创建、链接及遍历。 ... [详细]
  • 本文介绍了一家大型电信公司在SOA/BPM基础设施项目中采用的版本控制和分支管理策略。自项目启动以来,团队通过定义详细的命名约定、测试流程和分支规则,确保了项目的顺利进行并成功投入生产。 ... [详细]
  • 本文旨在提供一套高效的面试方法,帮助企业在短时间内找到合适的产品经理。虽然观点较为直接,但其方法已被实践证明有效,尤其适用于初创公司和新项目的需求。 ... [详细]
  • 本文探讨了从传统SSM(Spring + Spring MVC + MyBatis)架构到现代化Spring Boot框架的转变过程,详细分析了两者之间的差异和改进。文章结合图表展示了技术演进的关键节点,帮助读者更好地理解这一重要变革。 ... [详细]
  • 比较源文件与备份目录的差异
    本文介绍了如何有效对比源文件和备份目录之间的差异,确保数据完整性和一致性。文章提供了详细的步骤和工具推荐,帮助用户快速识别并解决潜在问题。 ... [详细]
author-avatar
上海十里红妆婚礼策划红_196
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有