进度条详解

青春..荒唐

浏览: 973346 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
常见特效

HTML 常见特效

实际项目中发现，HTML5 的meter和progress控件虽然都可以实现进度显示，但综合考虑下来progress兼容性比较好些。meter控件在IOS ipad/iphone似乎都显示不正确。

①用progress控件控制

<progress value="10" max="100"></progress>

读者可以测试下，这个在各种浏览器环境下是基本工作的（IE10+以及其他靠谱浏览器都支持）。

【注意】控制条的宽度一定要用value的方式来设定，直接用width='100px'是没有用的

用meter控件

<meter id='progress' style='width:100px' value='50' min='1' max='100'></meter>

读者可以测试下，这个在苹果环境下是不工作的。

【注意】控制条的宽度一定要用value的方式来设定，直接用width='100px'是没有用的

一、progress元素基本了解

<progress>不支持progress标签</progress>

当浏览器不支持该标签时，便会显示出标签里的内容，效果：

基本属性

max, value, position, 以及labels.

①max指最大值。若缺省，进度值范围从0.0~1.0，如果设置成max=100, 则进度值范围从0~100.

②value就是值了，若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。

什么意思？比方说<progress></progress>没有value，是不确定的，因此IE10浏览器下其长相是个无限循环的虚点动画；但是，一旦有了value属性（即使无值），如<progress value></progress>, 也被认为是确定的，虚点动画——>变条条了，如下截图：（IE10 添加value后变条）

IE10 添加value后进入仙人模式

③position是只读属性，顾名思意，当前进度的位置，就是value / max的值。如果进度条不确定，则值为-1.

④labels也是只读属性，得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels，返回的就是HTMLCollection, 下为我的某测试截图（截自Opera浏览器下，目前FireFox18.0.2以及IE10貌似都不支持）：

Opera浏览器下的测试结果：

Opera浏览器下的测试结果

因为<progress>标签兼容到IE10+，所以这里需要解决IE兼容

【好的兼容做法】

对于IE6~IE9浏览器，模拟进度条效果，如果不使用背景图片的话，一般而言，至少需要2层标签。我们需要再额外的徒增2层标签？？No, no, no! 外部的progress标签已经替我们做了一半的工作，因为，progress所对应的CSS样式，也是IE6~9浏览器需要的（高宽，边框色背景色什么的），因此，我们只需要再额外塞1层标签就可以了，这个标签对应的就是已经完成的进度条的样式。

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

我们需要怎样的CSS代码呢？如下，标红的部分与兼容处理所增加的，都是无伤大雅，不需要hack补丁的。

progress {
    display: inline-block;
    width: 160px;
    height: 20px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/
}
/*ie6-ie9*/
progress ie {
    display:block;
    height: 100%;
    background: #0064B4;
}

progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }

当然，progress以及自定义的ie元素，ie6~8都是不认识的，我们需要打个动态补丁，如下：

if (typeof window.screenX !== "number") {
    document.createElement("progress");	
    document.createElement("ie");	
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>进度条兼容</title>
    <style type="text/css">
        progress {
            display: inline-block;
            width: 160px;
            height: 20px;
            border: 1px solid #0064B4;
            background-color:#e6e6e6;
            color: #0064B4; /*IE10*/
        }
        /*ie6-ie9*/
        progress ie {
            display:block;
            height: 100%;
            background: #0064B4;
        }

        progress::-moz-progress-bar { background: #0064B4; }
        progress::-webkit-progress-bar { background: #e6e6e6; }
        progress::-webkit-progress-value  { background: #0064B4; }
    </style>
    <script>
        if (typeof window.screenX !== "number") {
            document.createElement("progress");
            document.createElement("ie");
        }
    </script>
</head>
<body>
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

</body>
</html>

【注意】progress以及自定义的ie元素，ie6~8都是不认识的，我们需要打个动态补丁，js位置需在DOM节点之前。

二.无需考虑兼容的条形进度条

原理：嵌套DIV

<!doctype html>  
<html>  
<body>  
    <div style="width: 30%;height: 20px;border: #00B83F solid 1px;"><!--控制进度条大小-->  
        <div style="width: 80%;background-color: #00B83F;height: 20px;"></div><!--进度条-->  
    </div>  
</body>  
</html>

可以在里div的内部或右边加个百分比显示。

这种条形进度条在任何浏览器下都可以显示，ie5都行！这种条形进度条常常与ligerUI等等结合应用。

想要动态？写JavaScript就行啦~

三.简单模拟下下载进度跑条

<h4>加载进度</h4>
    <input type="button" value="下载" onclick="DownloadStart();" />
    <progress id="Download" value="" max="100"></progress>
    <script>
        function DownloadStart() {
            alert("加载下载")
            var Down = document.getElementById("Download");
            var i = 0;
            var DownSetTime;
            DownSetTime = setInterval(function () {
                i += 10
                Down.value = i;
                if (i == 100) {
                    clearInterval(DownSetTime);
                    alert("加载完成")
                }
            }, 500)
        } 
    </script>

当然了，真正的进度是肯定不能这样写的，因为实际上目前还没有一种方法可以判断进度的进程，因此只能让跑条一直跑，或者跑到一个顶峰然后停着等下载完成，直接跳了100%。

例一：进度条跑到90，然后等，等服务器或者其他地方传进来一个值，然后再一下子到100.

<h4>加载进度</h4>
    <input type="button" value="加载" onclick="LoadStart();" />
    <progress id="Load" value="0" max="100"></progress>
    <script>
        function LoadStart() {
            var Complete = 0;//加载完成与否，初始为0，完成为1
            var Load = document.getElementById("Load");//获取进度条
            var i = 0;//声明跑条的初始值

            //加载进度跑条
            LoadSetTime = setInterval(function () {
                i += 10;//每500毫米跑10份
                Load.value = i;
                if (i >= 90) {//当跑条到90时，就不跑了，停止
                    clearInterval(LoadSetTime);
                    return;
                }
            }, 500);

            //加载完成与否
            GetData = setInterval(function () {
                if (Complete == 1) {//当加载完成，也就等于1的时候
                    Load.value = 100;//跑条完成，到100
                    alert("加载完成");
                    clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
                    clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
                }
            });

            //从服务器获得加载内容完成与否的值，当然了你可以定义这个值从任何地方来，比如页面加载完成，动画加载完成，图片加载完成，一个动作执行完毕等等都可以，具体看你需要用在的地方
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    </script>

例二：进度条一直跑，然后等，等服务器或者其他地方传进来一个值，然后再一下子到100以后清除所有计时器，加载完成

<h4>加载进度</h4>
    <input type="button" value="加载" onclick="LoadStart();" />
    <progress id="Load" value="0" max="100"></progress>
    <script>
        function LoadStart() {
            var Complete = 0;//加载完成与否，初始为0，完成为1
            var Load = document.getElementById("Load");//获取进度条
            var i = 0;//声明跑条的初始值

            //加载进度跑条
            LoadSetTime = setInterval(function () {
                i += 10;//每500毫米跑10份
                Load.value = i;
                if (i == 100) {
                    i = 0;
                }
            }, 500);

            //加载完成与否
            GetData = setInterval(function () {
                if (Complete == 1) {//当加载完成，也就等于1的时候
                    Load.value = 100;//跑条完成，到100
                    clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器
                    clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器
                }
            });

            //从服务器获得加载内容完成与否的值，当然了你可以定义这个值从任何地方来，比如页面加载完成，动画加载完成，图片加载完成，一个动作执行完毕等等都可以，具体看你需要用在的地方
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    </script>

四.拓展：圆形动态进度条，这个我会在后面做总结

分享到：

jsonp与跨域请求 | 【JavaScript从入门到精通】第三课

2018-01-20 18:48
浏览 1271
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论