通过 js 方式实现原生 html 按钮倒计时功能 - js

日常开发中经常会遇到获取短信验证码倒计时的小功能，此次遇到一个通过 Thymeleaf 模板渲染的方式实现的项目，其页面模板引擎是通过原生 html 方式实现，现今各式各样成熟的组件横飞，突然回顾到原生 html 突然好怀念当初的上学时大家一起埋头做毕设的时候哈哈，故特此小结，具体 code 实现如下：

首先，创建按钮并绑定触发事件

<input id="msgCode"
       type="button"
       value="获取验证码"
       style="font-size:12px;display: none">

其次，实现按钮点击事件，通过按钮点击事件触发倒计时方法的调用

<script type="text/javascript">
    var time = 60, // 计数器
        timer=null; // 定时器
    var bt = document.getElementById('msgCode');
    function countDown() { // 按钮倒计时方法
        if (time <= 1) {
            bt.value = "获取验证码";
            bt.removeAttribute("disabled"); // 删除按钮disabled属性
            clearInterval(timer); // 清除定时器
            return;
        } else {
            time--;
            bt.value = ("剩余(" + time + ")秒");
            bt.setAttribute("disabled", true);
        }
    }

    $(function () {
        $("#tab1-1").on("click", function () { // 帐号登录点击事件

        });
        $("#tab1-2").on("click", function () { // 快捷登录点击事件

        });
        $("#msgCode").on("click", function () { // 获取短信验证码事件
            var account = document.getElementById("account").value;
            if (0 == account.length) { // Check
                alert("手机号不能为空");
                return;
            }
            if (11 > account.length) { // Check
                alert("请输入正确手机号");
                return;
            }
            $.ajax({ // Request
                type: "POST",
                url: "/xxxxx/api/account/sendMsg",
                contentType: "application/json", // 必须有
                dataType: "json", // 表示返回值类型，不必须
                data: JSON.stringify({ cellPhone: account }),
                success: function (jsonResult) {
                    timer = setInterval("countDown()", 1000);// 执行方法：倒计时
                }
            });
        });
    });
</script>

最后，大功告成重新编译查看效果即可。

以上便是此次分享的全部内容，希望能对大家有所帮助！