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
Analysis of the use of the MySQL database show processlist command
In actual project development, if we have a lot o...
A brief discussion on browser compatibility issues in JavaScript
Browser compatibility is the most important part ...
Detailed explanation of the use of Vue card-style click-to-switch image component
This article shares the vue card-style click-to-s...
Example analysis of MySQL startup and connection methods
Table of contents How to start mysqld Method 1: m...
Analyze the problem of transferring files and other parameters in the upload component of element-ui
Recently, I used vuethink in my project, which in...
Solution to Linux server graphics card crash
When the resolution of the login interface is par...
MySQL 8.0.19 installation and configuration tutorial under Windows 10
I will be learning MySQL next semester. I didn...
Native JS to achieve drag photo wall
This article shares with you a draggable photo wa...
Detailed explanation of MySQL user and permission management
This article uses examples to describe the manage...
Detailed explanation of the process of using GPU in Docker
Table of contents Download tf-gpu Build your own ...
Vue custom directive details
Table of contents 1. Background 2. Local custom i...
How to embed other web pages in a web page using iframe
How to use iframe: Copy code The code is as follo...
How to use & and nohup in the background of Linux
When we work in a terminal or console, we may not...
Summary of JavaScript JSON.stringify() usage
Table of contents 1. Usage 1. Basic usage 2. The ...
How to Develop a Progressive Web App (PWA)
Table of contents Overview Require URL of the app...