How to set a timer using HTML

How to set a timer with HTML: First create a new HTML page and set a button; then bind a function to the button; then set a variable to save the timer; finally write it in the function Just implement the code.

The operating environment of this article: windows7 system, html5&&javascript version 1.8.5, Dell G3 computer.

Create a new html page, then set a button and bind a function to the button. For example, set a function timer.

What we need to do now is a countdown timer. Assume the countdown time is 5 seconds, so we need to set a variable to save the number of seconds. And we also need to get the button element.

As shown in the figure, set a variable to save the timer. setInterval is the timer function. It has two parameters. The first is the function and the second is the time. Here I set function() to be called every 1000 milliseconds.

Then start writing code in the function. First, judge whether s is less than 0, because the timer I made starts counting down from 5 seconds. If it is less than 0, it will appear. It is a negative number, so you need to determine whether it is less than 0. If it is less than 0, clear the timer, modify the content in the button, and make the button available.

If it is not less than 0, modify the content of the button, subtract 1 from the time, and make the button unavailable.

After the countdown timer is completed, the initial effect is as shown in the figure. At this time, the color of the button is relatively bright, indicating that the button is clickable, and the text inside It's "send".

When we click the button, a five-second countdown begins, and the button text changes and the button is unclickable. After the countdown is over, the button will change to step 6. If you click it again, it will cycle again.

Recommended: "js basic tutorial" "HTML video tutorial"

The above is the detailed content of How to set a timer using HTML. For more information, please follow other related articles on the PHP Chinese website!