Home  >  Article  >  Web Front-end  >  How to implement 10 seconds countdown in jquery

How to implement 10 seconds countdown in jquery

青灯夜游
青灯夜游Original
2022-04-28 15:49:172519browse

Method: 1. Create a label and set the content to the number 10; 2. Use setInterval() to set a timer and use "var num=label.text();num--;" in the timer. Label.text(num);" stipulates that the value 10 will be decremented by 1 every second; 3. When the value is 0, just cancel the timer.

How to implement 10 seconds countdown in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery implements 10-second countdown

Implementation method:

  • Create a label and set the content Use setInterval() to set a timer for the number 10

  • , which specifies that the label content 10 will be decremented by 1 every second.

  • When the value is 0, use clearInterval() to cancel the timer

Implementation example:

<!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>

How to implement 10 seconds countdown in jquery

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to implement 10 seconds countdown in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn