Home > Article > Web Front-end > How to implement a sixty second countdown using jquery

How to implement a sixty second countdown using jquery

不言Original: 2018-07-14 16:38:573055browse

This article mainly introduces the use of jquery to implement a sixty-second countdown. It has a certain reference value. Now I share it with you. Friends in need can refer to

Sending that is often used in front-end development The button countdown is rewritten every time, which is quite troublesome. Record it and copy the code directly in the future.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
        <title>60s倒计时</title>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="button" value="邮箱验证码" onclick="sendVerificationCode(this)" />
            
        <script type="text/javascript">
            //发送验证码按钮的60s倒计时
            var countdown = 60;
            function sendVerificationCode(obj) {
                if(countdown == 0) {
                    obj.removeAttribute("disabled");
                    obj.value = "重新获取";
                    countdown = 60;
                    return;
                } else {
                    obj.setAttribute("disabled", true);
                    obj.value = "重新(" + countdown + ")";
                    countdown--;
                }
                setTimeout(function() {
                    sendVerificationCode(obj)
                }, 1000)
            }
        </script>
    </body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please Follow PHP Chinese website!

Related recommendations:

About the scope issue in the timer in js

Imitate querySeletor faithfully Compatible with IE 67

The above is the detailed content of How to implement a sixty second countdown using jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About the scope problem in timer in jsNext article：About the scope problem in timer in js

See more

How to implement a sixty second countdown using jquery

Related articles