How to set jquery to get text messages after 59 seconds

In modern society, mobile phones have become an indispensable part of people's daily lives. Obtaining mobile phone verification codes has become an indispensable part of various business scenarios. In order to prevent malicious registration and information leakage, many platforms will set up SMS verification codes to verify when users register or log in. However, if SMS verification codes are sent too frequently, it will bring unnecessary trouble and waste of time to users. How to improve user experience while maintaining verification code verification has become an issue that must be considered.

In this case, we can consider using JQuery to solve this problem. JQuery is a fast and concise JavaScript framework whose core design philosophy is "write less, do more". Using JQuery, we can very conveniently perform dynamic operations on the page and use Ajax technology to achieve asynchronous interaction between the page and the server.

First, we need to define a button for users to get the verification code. When the user clicks the Get Verification Code button, we need to change the status of the button so that the button becomes unavailable within 59 seconds to prevent the user from clicking the Verification Code button repeatedly. Here we draw lessons from the disabled button style in the Bootstrap framework. At the same time, the color of the button is also changed when the button is disabled. The button used to be blue, and after it is disabled, the button turns gray.

HTML code:

<button type="button" class="btn btn-primary" id="getCodeBtn" onclick="getCode(this)">获取验证码</button>

When the user clicks the Get Verification Code button, we need to change the status of the button. In JQuery, we can make the button disabled by setting the disabled attribute of the button. Use status. At the same time, we need to start a timer and use the timer mechanism to control the button to return to the available state after 60 seconds. The code is as follows:

function getCode(obj) {
    var $getCodeBtn = $(obj);
    var count = 59;
    var countdown = setInterval(function() {
        $getCodeBtn.addClass("disabled");
        $getCodeBtn.css("cursor", "not-allowed");
        $getCodeBtn.text("重新发送 (" + count + ")");
        count--;
        if (count == 0) {
            clearInterval(countdown);
            $getCodeBtn.css("cursor", "pointer");
            $getCodeBtn.removeClass("disabled");
            $getCodeBtn.text("获取验证码");
        }
    }, 1000)
}

In the code, three variables will first be defined. $getCodeBtn represents the button to obtain the verification code, count represents the countdown seconds of the timer, and countdown represents the handle of the timer. After clicking the button, we trigger a timer and call an anonymous callback function every second through the setInterval() function. In the callback function, we first set the button's status to disabled and change the button's CSS style to make the mouse disabled. Also, change the button text to "Resend (Countdown)". While displaying the remaining seconds, the count value is decremented by 1 each time in the timer's callback function. When the count decreases to 0, we clear the timer, set the button's status to available, and change the button's text to "Get Verification Code".

In this way, we can improve the user experience without affecting the verification code verification, allowing users to obtain SMS verification codes more conveniently, while also preventing users from repeatedly clicking the verification code button, reducing the number of errors. Time wasted by frequently obtaining SMS verification codes.

In general, through JavaScript frameworks such as JQuery, we can easily change the status of the page and optimize the user experience, thereby improving the user experience of our website or APP.

The above is the detailed content of How to set jquery to get text messages after 59 seconds. For more information, please follow other related articles on the PHP Chinese website!