有关进度条的一些写法

来源:互联网 发布:js代码反混淆工具 编辑:程序博客网 时间:2024/05/29 12:40

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;            }