点击提交按钮后按钮点不动且颜色置灰

最新推荐文章于 2022-12-21 11:06:34 发布

zhener09

最新推荐文章于 2022-12-21 11:06:34 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/sinat_41747081/article/details/95760813

版权

版权声明：本文为博主原创文章，未经博主允许不得转载。
要实现的效果是安装期间button按钮点不动且颜色置灰，具体代码如下：
css:

input {
   width: 100px;
   background-color: #82b6f4;
   border-radius: 13px;
   text-align: center;
   padding: 4px;
   color: #fff;
   outline: none;
   cursor: pointer;
   border: none;
}

html：

<input type="button" value="安装" onclick="install()" >

js：

// 安装时需要一段时间，在这段时间里按钮点不动，且颜色置灰
var inputElem = document.querySelector('input');
var isSubmittingInstalling = false;
function start() {
    isSubmittingInstalling = true;
    inputElem.style.background = '#ccc';
}
function end() {
    isSubmittingInstalling = false;
    inputElem.style.background = '#82b6f4';
}
function install() {
    if (isSubmittingInstalling) {
        return;
    }
    start();
    // 本来应该是调用接口，这里用定时器取代
    var flag = setTimeout(function(){
        console.log(2);
        end();
    }, 3000)
}