The concept of timer and delay
//- Timer
// Timer ID number setInterval (callback function, milliseconds);
// Call the callback function every milliseconds
// clearInterval (timer ID number)
// Stop the timer with the specified ID number (actually destroying and releasing resources)
//--Delayer
// Delay Id number setTimeout (callback function, millisecond interval)
// Start from the call, wait for the specified number of milliseconds and call the callback function once, end
// Use clearTimeout to clear the delay
Reproduction image:
The following figure will appear after the page is opened: After that, the number of the button value decreases by 1 every 1 second until 0 stops the button content becomes agreeable
Implementation code:
Copy code code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<Style Type = "Text/CSS">
#btn
{{
width:200px;
height:50px;
background -color:gary;
}
</style>
<script type="text/javascript">
onload = function () {
//Get the button object
var btn = document.getElementById('btn');
//Create a timer and return the timer ID
var intervalId = setInterval(function () {
var waitSecond = parseInt((//d+/).exec(btn.value));//Use RegExp.exec() method to return the matching string content
waitSecond--;//Time-
if (waitSecond >= 0) {//Judgement
btn.value=btn.value.replace(//d+/, waitSecond) //Use string.repleace(RegExp,code) method to replace the number in the button value and return the replacement result
} else {
btn.value = 'Agree';//Change the button value to agree
btn.disabled = false;//Change the disabled value of the button to false
clearInterval(intervalId);//Clear the timer
}
}, 1000);
};
</script>
</head>
<body>
<input type="button" name="name" value="Please read carefully for 5 seconds and click to agree to continue" id="btn" disabled="disabled"/>
</body>
</html>