Use Javascript to implement the function of sending SMS verification code interval
|
In many apps and websites, when we log in or register an account, there will be a place to send SMS verification codes 1. However, in order to prevent malicious acquisition of verification codes, we generally set a clickable time interval. After the time interval 1 is over, it can continue to be sent. Next, use code to implement The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Mobile phone number: <input type="text"><button>Send verification code</button>
<script>
var btn = document.querySelector('button')
var time=3
btn.addEventListener('click',function () {
btn.disabled=true
var timer = setInterval(function () {
if (time<0){
clearInterval(timer)
btn.disabled=false
btn.innerHTML = 'Send verification code'
time=3
}else {
btn.innerHTML = 'remaining' + time + 'seconds'
time -= 1
}
},1000)
})
</script>
</body>
</html>The effect is as follows
Code explanation <br /> Here, because we only change the style and function of the button, we only get the button and then set a time variable, which is the countdown time. Then set the click event. When we click this button, the disable of this button becomes true, which means it cannot be clicked. This is the end of this article about using Javascript to implement the interval of sending SMS verification codes. For more relevant js content about sending SMS verification codes, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: nginx configuration location summary location regular writing and rewrite rule writing
>>: Innodb system table space maintenance method
Recommend
How to view mysql binlog (binary log)
For example, when you create a new table or updat...
Implementation of nginx worker process loop
After the worker process is started, it will firs...
MySQL operations: JSON data type operations
In the previous article, we introduced the detail...
Solution to the problem of information loss with "_" in header when using Nginx proxy
Preface When developing a gateway project, the si...
Right align multiple elements in the same row under div in css
Method 1: float:right In addition, floating will ...
Summary of MySQL development standards and usage skills
1. Naming conventions 1. Database names, table na...
In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance
Table of contents 1. Prototype chain inheritance ...
Dockerfile implementation code when starting two processes in a docker container
I want to make a docker for cron scheduled tasks ...
MySql index improves query speed common methods code examples
Use indexes to speed up queries 1. Introduction I...
Handtrack.js library for real-time monitoring of hand movements (recommended)
【Introduction】: Handtrack.js is a prototype libra...
Vue implements a simple timer component
When doing a project, it is inevitable to encount...
Solve the problem of invalid utf8 settings in mysql5.6
After the green version of mysql5.6 is decompress...
CentOS 8 officially released based on Red Hat Enterprise Linux 8
The CentOS Project, a 100% compatible rebuild of ...
Linux system prohibits remote login command of root account
ps: Here is how to disable remote login of root a...
Mysql uses insert to insert multiple records to add data in batches
If you want to insert 5 records into table1, the ...