JavaScript to implement the countdown for sending SMS

This article shares the specific code of JavaScript to implement the countdown of sending SMS for your reference. The specific content is as follows

Implementation ideas:

1. js gets the send button element object
2. Set a sending interval (global variable)
3. Bind the click event to the send button element object - - -onclick,
Click event handler:
① After clicking, the button is set to disabled—disabled: true;
② Use the timing function with a time interval of 1 second.
Function handler for timed function calls:
Determine whether the time is 0
Not 0 - - - The description of the button changes to: How many seconds are left, and the time is reduced by 1
If it is 0, the button can be clicked and the description inside is restored to "Send"

Code example:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send SMS</title>
    <style>
        .box {
            width: 360px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        Mobile phone number: <input type="number">
        <button>Send SMS</button>
    </div>

    <script>
        var btn = document.querySelector('button');
        var time = 10;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // Clear the timer and restore the button clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = 'Send SMS';
                    time = 10;
                } else {
                    btn.innerHTML = 'remaining' + time + 'seconds';
                    time--;
                }
            }, 1000);
        });
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript implements 60s SMS countdown
JS implements the button countdown function after sending SMS verification (to prevent refresh countdown from failing)
JS gets the SMS verification code countdown implementation code
js implements SMS sending countdown function (regular verification)
js implements 5-second countdown to resend SMS function
JS implements the function of obtaining SMS verification code and countdown when users register
Implementation of JS SMS verification code countdown function (no verification code, only countdown)
A simple way to implement a countdown to send SMS in js
Implement the countdown function after sending the SMS verification code based on JS (ignore page refresh, and do not perform the countdown function when the page is closed)
Implementing SMS button countdown based on JavaScript (super simple)

<<: Solve the problem of multiple listeners reported when starting tomcat in Idea

>>: How to migrate local mysql to server database