Comment implémenter un compte à rebours de 10 secondes dans jquery-Questions et réponses frontales-php.cn

Comment implémenter un compte à rebours de 10 secondes dans jquery

青灯夜游

Libérer： 2022-04-28 15:52:10

original

2525 Les gens l'ont consulté

Méthode : 1. Créez une étiquette et définissez le contenu sur le nombre 10 ; 2. Utilisez setInterval() pour définir une minuterie et utilisez "var num=label.text();num--;label.text(" dans le timer num);" stipule que la valeur 10 est décrémentée de 1 chaque seconde ; 3. Lorsque la valeur est 0, annulez simplement le timer.

Comment implémenter un compte à rebours de 10 secondes dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery implémente un compte à rebours de 10 secondes

Méthode d'implémentation :

Créez une étiquette et définissez le contenu sur le nombre 10
Utilisez setInterval() pour définir une minuterie qui décrémente le contenu de l'étiquette par 10 chaque seconde 1.
Lorsque la valeur est 0, utilisez clearInterval() pour annuler le minuteur

Exemple d'implémentation :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					var myVar = setInterval(function(){ 
						var num=$("span").text();
						num--;
						$("span").text(num);
						if(num==0){
							clearInterval(myVar);
						}
					}, 1000);
					
				});
			});
		</script>
	</head>
	<body>
		<div><span>10</span> 秒</div><br>
		<button>开始十秒倒计时</button>
	</body>
</html>

Copier après la connexion

Comment implémenter un compte à rebours de 10 secondes dans jquery