有关进度条的一些写法

1. 动态图片的的ajax

ajax语法

$.ajax({
            type: 'post',
            url: 'xxx',
            data: str,
            beforeSend: function (xhr) {
                $(".picture").show();
            },
            success: function (result) {
                    //alert("提交成功");
                } else {
                    alert("提交失败：" + result.message);
                }
            },
            complete: function (xhr) {
                //可以写隐藏显示
                $(".picture").delay("slow").hide();
            },
            error: function (result) {
                console.log(result.message);
            }
        })

---

2.有百分比的进度条

html页面
添加一个人内联样式

<div class ="test">
    <div id="progress" style="width:0%"></div>
</div>

css页面

 .test{
            width:450px;
            border:1px solid #000;
            height:25px;
        }
        #progress{
            background:#0f0;
            float:left;
            height:25px;
            line-height:25px;
            text-align:center;
        }

js部分

 function progress(){
                var jindutiao = document.getElementById("progress");
                jindutiao.style.width = parseInt(jindutiao.style.width) + 1 + "%";
                jindutiao.innerHTML = jindutiao.style.width;
                if(jindutiao.style.width == "100%"){
                    window.clearInterval(shijian);
                }
            }
            var shijian = window.setInterval(function(){progress();},100);
            window.onload = function(){
                shijian;
            }