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

insert image description here

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.
Then set the timer. If the countdown is less than 0, clear the timer, and the countdown ends. Make the button clickable, and the 1 inside becomes the verification code. Then reassign the countdown to 3.
If the countdown is greater than 0, change the text in the button to 'remaining' + time + 'seconds', time-, and judge once every cycle

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:

JS implements a simple SMS verification code interface
How to access Ali Dayu SMS verification code with nodejs
Vue.js implements SMS verification code function on mobile terminal
Nodejs sends Post request function (Send SMS verification code example)
js verification phone number, password, SMS verification code tool class
JS implements the function of obtaining SMS verification code and countdown when users register
JavaScript sends SMS verification code to implement code

<<: nginx configuration location summary location regular writing and rewrite rule writing

>>: Innodb system table space maintenance method

Podman boots up the container automatically and compares it with Docker

Use Javascript to implement the function of sending SMS verification code interval

Podman boots up the container automatically and compares it with Docker

How to use the href attribute of the HTML a tag to specify relative and absolute paths

Solve the problem that docker installation is completed and reported: bridge-nf-call-iptables is disabled

Detailed explanation of MySQL slow queries

W3C Tutorial (3): W3C HTML Activities

Manually implement the two-way data binding principle of Vue2.0

jQuery simulates picker to achieve sliding selection effect

Parsing Apache Avro Data in One Article

JavaScript to display hidden form text

Introduction to the use of html area image hotspots with a list of related properties

Recommend

Detailed explanation of dynamically generated tables using javascript

Basic knowledge of MySQL learning notes

A summary of the knowledge points of database indexing. Everything you need to know is here.

Teach you how to build Redis cluster mode and sentinel mode with docker in 5 minutes

WeChat applet canvas implements signature function

Use of Linux xargs command

Detailed explanation of the use of MySQL DML statements

Example of how to enable Slow query in MySQL

An enhanced screenshot and sharing tool for Linux: ScreenCloud

Solution to the problem of repeated triggering of functions in Vue project watch

Deeply understand the reason behind the prompt "No such file or directory" when executing a file in Linux

Causes and solutions for cross-domain issues in Ajax requests

Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

Detailed steps for completely uninstalling and reinstalling MySQL under Windows 10

mysql-8.0.17-winx64 deployment method