简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  AngularJS-Stopp-Timer

AngularJS-Stopp-Timer

黄舟
黄舟Original
2017-02-17 11:36:021431Durchsuche

1. Problemhintergrund

Stellen Sie einen Timer ein, geben Sie die beiden Variablen startData und endData ein und subtrahieren Sie 5 bzw. 50, nachdem der Timer gestartet wurde Wenn der Timer zurückgesetzt wird, werden die Daten auf die ursprünglichen Daten zurückgesetzt.


2. Implementierungsquellcode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS停止定时器</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("intervalApp",[]);
			app.controller("intervalController",["$scope","$interval",function($scope,$interval){
				$scope.startData = 100;
				$scope.endData = 1000;
				
				var stopEvent;
				
				$scope.startEvent = function(){
					if(angular.isDefined(stopEvent)) return;
					
					stopEvent = $interval(function(){
						if($scope.startData > 50 && $scope.endData > 500)
						{
							$scope.startData = $scope.startData - 5;
							$scope.endData = $scope.endData - 50;
						}
						else
						{
							$scope.stopClick();
						}
					},1000)
				};
				
				$scope.stopClick = function(){
					if(angular.isDefined(stopEvent))
					{
						$interval.cancel(stopEvent);
						stopEvent = undefined;
					}
				};
				
				$scope.resetEvent = function(){
					$scope.startData = 100;
					$scope.endData = 1000;
				};
				
				$scope.$on("$destory",function(){
					$scope.stopClick();
				});
			}]);
		</script>
	</head>
	<body ng-app="intervalApp">
		<p ng-controller="intervalController">
			<button data-ng-click="startEvent()">开始</button>
			<button data-ng-click="stopClick()">停止</button>
			<button data-ng-click="resetEvent()">重置</button><br>
			<p>开始数据：{{startData}}</p><br>
			<p>结束数据：{{endData}}</p><br>
		</p>
	</body>
</html>



3. Implementierungsergebnisse


(1) Initialisierung

 AngularJS-Stopp-Timer

(2) Zum Starten klicken

 AngularJS-Stopp-Timer

(3) Klicken Sie auf Stopp

 AngularJS-Stopp-Timer

(4) Klicken Sie auf Zurücksetzen

 AngularJS-Stopp-Timer


Das Obige ist der Inhalt, mehr verwandt Inhalt Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Java Virtual Machine Learning – Garbage-Collection-AlgorithmusNächster Artikel：Java Virtual Machine Learning – Garbage-Collection-Algorithmus

In Verbindung stehende Artikel

Mehr sehen