zoukankan      html  css  js  c++  java
  • 点击按钮倒计时

    点击后 倒计时5秒, 5秒后恢复。

      <input type="button" value="获取验证码"></button> 
     var btn = document.querySelector('input');
            // 点击事件
            btn.onclick = function () {
                //点击按钮时,按钮禁用
                btn.disabled = true;
                // 倒计时5秒
                var index = 5;
                // 按钮文字为获取验证码(5)
                btn.value = `获取验证码 (${index}) `;
                // 定时器,延迟 1s
                var timer = setInterval(function () {
                    // 倒计时 --,值也跟着改变
                    index--;
                    btn.value = `获取验证码 (${index}) `;
                    // 当倒计时等等为0时
                    if (index == 0) {
                    // 停止计时
                    clearInterval(timer);
                    // 按钮禁用取消
                    btn.disabled = false;
                    // 将文字值重置为获取验证码
                    btn.value = '获取验证码';
                }
                }, 1000)        
                  //setInterval 一次性定时器
  • 相关阅读:
    权限管理命令
    常用命令2
    常用命令1
    queue
    poj 3984
    L3-008 喊山 (30 分)
    常州大学新生寒假训练会试 I 合成反应
    dfs 的全排列
    poj 1154
    hdu 1241
  • 原文地址:https://www.cnblogs.com/yangisme/p/12088428.html
Copyright © 2011-2022 走看看