用css2属性clip实现网页进度条

前言

看了网上一些关于网页进度条样式的资料，有很多方式实现，针对其展现形式，有用图片的，有用css2属性clip，有用flash的，本人就学会了一种，下面就简单来介绍一下。

css2的属性clip

如果你不是很明白clip属性，那么我就用大白话来解释一下，clip:rect(0px,0px,0px,0px)有四个值，同理是顺时针方向赋值，上右下左，记录改元素裁切方式，

例如:一个元素div，其width:300px;height:300px; clip:rect(0px,100px,60px,0px)

表示裁切的左边距离原元素上边缘0px；

裁切的右边距离原始左边缘100px；

裁切的下边距离原始元素上边缘是60px；

裁切的左边距离原始元素元素左边距离是0px；

如果明白了，那么再来一张图测试一下，如果设置是clip:rect(10px,100px,40px,5px)图片应该啥样子呢？如下

说到这里，我就当你明白了，继续往下说，

所以现在我们要改变的就是裁切元素的右值，让其等于制定的宽度，那么元素就全部呈现出来了。

设置进度条样式

对于css我做的还是比较low的，那么还是要贴出我很low的css代码，

<style type="text/css">
    #progressBox{width:300px;height:60px;position:absolute;left:;border:1px solid #000;}
    #progressBar{background:blue;opacity:0.3;filter:alpha(opacity=30); width:300px;height:60px;position:absolute;clip:rect(0px,0px,60px,0px);left:;top:;}
    #progressText{color:Black;width:300px;height:60px;position:absolute;left:;top:;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}
</style>

页面元素

<body>
<div id="progressBox">
    <div id="progressBar"></div>
    <div id="progressText">0%</div>
</div>
<input type="button" value="开 始" id="btn" style="position:absolute;left:50%;top:20%;"/>
</body>

这里需要解释一下为啥会有3个元素，一个是元素容器(progressBox)基本就是想突出边框，让用户知道100%应该是有多长的容量，

第二个progressBar是表示不断变化的元素背景色设置为淡蓝色，

第三个是表示进度显示的数值文本

然后现在要做的就是js脚本

因为现在没有与服务器交互所以我就用setInterval来模拟增长因子

     timer = setInterval(progressFn, 10);
            function progressFn() {
                if (cent == max) {
                    clearInterval(timer);
                } else {
                    divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
                    divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
                    cent++;
                }
            };

上边这段js是通过改变裁切的右边距实现展示进度条背景色，同时改变进度文本值。

XMLHttpRequest的progress事件实现前后交互的进度条显示

利用XMLHttpRequest第二版还定义的progress事件可以知道上传进度，来配合我们页面前端的展示进度来真正实现有后端交互的进度条

先上代码

var xhr = new XMLHttpRequest();
            xhr.timeout = 8000;
            xhr.open('POST', form.action);
            xhr.send(formData);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log("xhr.responseText", xhr.responseText);
                } else {
                    console.log("xhr.statusText", xhr.statusText);
                }
            };
            xhr.onprogress = updateProgress;
            //xhr.upload.onprogress = updateProgress;
            function updateProgress(event) {
                if (event.lengthComputable) {
                    var percentComplete = event.loaded / event.total;
                    console.log(event.loaded, event.total, 300 * percentComplete);
                    progressFn(300 * percentComplete, max);
                }
            }
            xhr.ontimeout = function (event) {
                alert('请求超时！');
            }

其中的event.loaded表示当前加载了多少字节流，而event.total表示总共有多少字节流得到这样一个百分比，

然后调用我们事先定义好的progressFn()函数就ok了，感觉还是挺方便的。

当然除了这种方式还有我前面提到过的配合flash来调用我们实现定义好的函数等。

下载地址演示效果图

以上就是我今天想要分享的小知识点，本人水平有限，如果有错误和建议

还恳请指出，如果觉得对你有用，请支持一下。