jq小功能点击按钮加载进度条_jquery 按钮点击事件添加进度条-CSDN博客

本文链接：https://blog.csdn.net/weixin_44159890/article/details/101394591

*本人小白
*点击按钮加载进度条
*直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">  
    .btn{
        cursor: pointer
    }
    .loadBox{
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 12px;
    }
    .loadText{
        width:70px;
        height: 20px;
        display: inline-block
    }
    .loadBar{
        height: 20px;
        display: inline-block
    }
    </style>
    <script>
    $(function(){

     })
    function load(){
        var num = 0;
        var loadBtn=$(".btn")//获取属性
        var loadText=$(".loadText")
        var loadBar=$(".loadBar")
        var progressInterval=setInterval(function(){
            if(num<1000){
                num++
                var Progresswidth=(num/10).toFixed()+"px";//这里设置进度条为100px
                loadBtn.attr('disabled',true).css({//点击后button禁止点击
                    'opacity':'0.5',
                    'cursor': 'no-drop',
                });
                loadText.text(parseInt(num/10)+"%");
                loadBar.css({
                    'width':Progresswidth,
                    'background':"red"
                })
            }else{
                loadBtn.attr('disabled',false).css({
                    'opacity':'1',
                    'cursor': 'pointer',
                });
                loadText.text("加载完成")
                clearInterval(progressInterval)//执行后清除Interval
            }
        },1)//这里我们设置成1毫秒执行一次，要执行1000次
    }
    </script>
</head>
<body>
    <button onclick="load()" class="btn">Click Me</button>
    <div class="loadBox">
        <span class="loadText">加载中...</span>
        <span class="loadBar"></span>
   </div>
</body>
</html>