This article describes the method of JS to implement the countdown and resend SMS verification code function. Share it for your reference, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-Countdown to send text messages on your mobile phone</title>
<style>
button{
width: 100px;
height: 30px;
border: none;
}
input{
outline: none;
}
</style>
<script>
= function(){
function $(id){ return (id); }
$('btn').onclick = function(){
clearInterval(timer); //Clear the timer var that = this;
= true;
var count = 5;
var timer = setInterval(function(){
if(count>0){
count--;
= "time left"+ count +"s";
}else{
="Resend SMS";
= false;
clearInterval(timer); //Clear the timer }
},1000);
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" >
<button >Click to send a text message</button>
</div>
</body>
</html>
Or use setTimeout to simulate. Generally speaking, it is recommended to use setTimeout, which is safer. When using setInterval(fn,1000), the program is executed once at intervals of 1s, but each program execution takes 3s, so you have to wait for the program to be executed before the next time, that is, the actual interval time is (the maximum value of the interval time and the program execution time). setTimeout (fn, 1000) means that the program is executed again after 1s and is executed only once. Each program execution requires 3s, so the actual time is 1s+3s=4s. SetInterval can be simulated using setTimeout recursive call.
<script>
= function(){
function $(id){ return (id); }
$('btn').onclick = function(){
var that = this;
= true;
var count = 5;
var timer = setTimeout(fn,1000);
function fn(){
count--;
if(count>0){
= "time left"+ count +"s";
setTimeout(fn,1000);
}else{
="Resend SMS";
= false;
}
}
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.