1. To implement the SMS verification code interface, first there must be a text box, next to it is a button, and the countdown starts when clicked.
2. First create the text box and button, set the corresponding id of the button, and then obtain the button element through the id in js and perform operations on it. At the same time, the countdown time and timer variables should be set, and the countdown cannot be continued before the end of the countdown after clicking the send button.
3. After the countdown is over, clear the timer and change the text to "Resend Verification Code", restoring the function that can be operated on the button, and at the same time, the countdown countdown is restarted from 5 seconds so that the countdown will be counted down again after clicking.
<head>
<meta charset="UTF-8">
<title>jsSend SMS verification code</title>
</head>
<body>
<input type="text"/><button >Send verification code</button>
</body>
<script type="text/javascript">
var bt01 = ("bt01");
= function() {
= true; //This button cannot be clicked when the countdown is clicked var time = 5; //Countdown to 5 seconds var timer = setInterval(fun1, 1000); //Set the timer function fun1() {
time--;
if(time>=0) {
= time + "Resend after s";
}else{
= "Resend verification code";
= false; //You can click the send button again after the countdown. clearTimeout(timer); //Clear the timer time = 5; //Set the loop restart condition }
}
}
</script>
Summarize
The above is the JS implementation simple SMS verification code interface introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!