jQuery implements the function of disabling the control button of sending verification code

Required effect: After clicking to send the verification code, the button is disabled and undisabled after 5 seconds.
The effect diagram is as follows:

insert image description here

Disable button after clicking send

insert image description here

Unban after 5 seconds and resend

insert image description here

The code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>  
</head>

<body>
  <input type="text">
  <input type="button" value="Send">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // Get the element var $btn = $("input:button")
    // Add button click event $btn.click(function () {
      // Define a variable to store the time number var n = 5;
      // Make the button disabled // Replace the text content of the button $(this).prop("disabled",true).val(n + "s and then send again")
      //Change the countdown content every 1s//Use the timer to reduce the time every 1svar timer = setInterval(() => {
        n--;
        // The text content changes // The default value of this inside the timer is window
        $(this).val(n + "s after resending")
        // If the time reaches 0, stop the timer if (n <= 0) {
          clearInterval(timer)
          // After 5 seconds, you need to resume sending the text // Undisable the button $(this).val("Resend").prop("disabled",false)
        }
      },1000)
      
    })
    
  </script>
</body>

</html>

This is the end of this article about how to disable the send verification code control button using jQuery. For more information about disabling the jQuery control button, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

jQuery countdown resend SMS verification code function example
jQuery implements sending verification code and 60-second countdown function
Implement the countdown function after sending SMS verification code based on jQuery (ignoring page closing)
jQuery implements the countdown effect code sharing of sending verification code by mobile phone
jQuery implements the countdown code for sending verification code by mobile phone

<<: Docker installation tomcat dubbo-admin instance skills

>>: Detailed explanation of how to use join to optimize SQL in MySQL