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