Home > Article > Web Front-end > How to implement 10 seconds countdown in jquery
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!