Maison > Article > interface Web > Comment implémenter un compte à rebours de 10 secondes dans jquery

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

青灯夜游original: 2022-04-28 15:49:172520parcourir

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.

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>

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

[Apprentissage recommandé : Tutoriel vidéo jQuery, vidéo web front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Quelle est l'utilisation de la requête multimédia en CSS3Article suivant：Quelle est l'utilisation de la requête multimédia en CSS3

Articles Liés

Voir plus