recherche

Maison  >  Article  >  interface Web  >  Minuterie d'arrêt AngularJS

Minuterie d'arrêt AngularJS

黄舟
黄舟original
2017-02-17 11:36:021434parcourir

1. Contexte du problème

Réglez une minuterie, étant donné deux variables startData et endData, soustrayez 5 et 50 respectivement après le démarrage de la minuterie, cliquez pour arrêter et mettre en pause ; la minuterie est réinitialisée, les données seront restaurées aux données d'origine.


2. Code source de mise en œuvre

<!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. Résultats de la mise en œuvre


(1) Initialisation

 Minuterie darrêt AngularJS

(2) Cliquez pour démarrer

 Minuterie darrêt AngularJS

(3) Cliquez sur Arrêter

 Minuterie darrêt AngularJS

(4) Cliquez sur Réinitialiser

 Minuterie darrêt AngularJS


Ce qui précède est le contenu, plus lié contenu Veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Java Virtual Machine Learning - Algorithme de récupération de placeArticle suivant：Java Virtual Machine Learning - Algorithme de récupération de place

Articles Liés

Voir plus