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

JavaScript Dom implements the principle and example of carousel

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

JavaScript Dom implements the principle and example of carousel

The difference between storing full-width characters and half-width characters in MySQL

Detailed explanation of the use of Vue3 state management

Why do select @@session.tx_read_only appear in DB in large quantities?

Ubuntu 20.04 turns on hidden recording noise reduction function (recommended)

HTML version declaration DOCTYPE tag

Specific example of MySQL multi-table query

Detailed explanation of Vue plugin

Reasons why MySQL queries are slow

MySQL permission control details analysis

Recommend

Summary of pitfalls encountered in installing mysql and mysqlclient on centos7

HTML Form Tag Tutorial (4):

Introduction to new features of MySQL 8.0.11

Teach you how to make cool barcode effects

Solve the problem that Docker cannot ping the host machine under Mac

The effect of CSS dynamic gradient border rotating around the content area (example code)

Analysis of the underlying principle of MySQL multi-version concurrency control MVCC

How to install multiple mysql5.7.19 (tar.gz) files under Linux

Vue+Openlayer batch setting flash point implementation code (based on postrender mechanism)

Several solutions for forgetting the MySQL password

MySQL 8.0.17 winx64 (with navicat) manual configuration version installation tutorial diagram

An example of how to use nginx to configure multiple laravel projects with one domain name

Problems and solutions encountered when using v-model to two-way bind the values of parent-child components in Vue

Workerman writes the example code of mysql connection pool

Vue page monitoring user preview time function implementation code