进度条简单实现

这种方式实现进度条只需要导入jquery文件就可以用了，非常简单

 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.9.1.js"></script>

<style>
.progressBar{
    width:200px; height:12px; border:1px solid #98AFB7; border-radius:5px; margin-top:10px;
}
#bar{
    width:0px; height:10px; border-radius:4px; background:#5EC4EA;
}
</style>

<script type="text/javascript">
function progressBar(){
    //初始化js进度条
    $("#bar").css("width","0px");
    //进度条的速度，越小越快
    var speed = 50;

    bar = setInterval(function(){
        
        nowWidth = parseInt($("#bar").width());
        //宽度要不能大于进度条的总宽度
        if(nowWidth<=198){
            barWidth = (nowWidth + 1)+"px";
            $("#bar").css("width",barWidth);
        }else{
            //进度条读满后，停止
            clearInterval(bar);
        } 
    },speed);
}
</script>
</head>
<body style="font-family: 微软雅黑; padding:20px;">

<div id="progress" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:999; display:block;">
<input type="button" value="开始" onclick="progressBar()" />
<div class="progressBar">
    <div id="bar"></div>
</div>
<div>
</body>
</html>

posted on 2016-07-27 11:06  往事随风、  阅读(301)  评论(0)  编辑  收藏  举报

导航