前言
本文主要介紹了關于Angular.js實現獲取驗證碼倒計時60秒按鈕的相關內容,關于這個功能相信不用多介紹,大家都不陌生,所以下面話不多說了,來一起看看實現的方法吧。
一、controller中代碼
angular.module('controllers') .controller('LoginCtrl', function ($scope, $location,$ionicLoading,$rootScope,$interval,$timeout) { $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); }; });
二、html頁面中
<button class="yz-btn" ng-click="onClick()" ng-disabled="timer"><span ng-if="showTimer">{{timerCount}}</span>{{text}}</button>
注:
1.class="yz-btn"
為button的樣式,可自己修改;
2.ng-disabled="timer"
控制button是否可以點擊;
3.ng-if="showTimer"
控制數字顯示;
4.ng-click="onClick()"
觸發效果,文字text默認“獲取驗證碼”,點擊之后為“60s后重新獲取”。
三、效果圖
1、點擊前
2、點擊后
總結
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com