php百分比进度条,写百分比进度条，一定会遇到的问题

这篇文章实现的百分比进度条，技术含量并不高，但着重想强调的是实现过程中应该引起注意的几个问题。

1、如果元素中有定义宽度，并且其值为百分比值如：.progressbar .pb_inner{width:1%;}，则jquery中的$(".progressbar .pb_inner").css("width")获取到的值并非css中定义的1%; 而是经过计算后的值，实例中取到的值为：父元素的600px X 1%=6px(注意：在原生js中getComputedStyle()方法取得的值也是计算后的值！)，而我们是用js通过以改变pb_inner的宽度百分比来实现的，并且在进度条中实时显示当前加载的百分值，解决思路是：避开直接获取元素的百分值，js中用'自+1的变量+ “%”'的形式做字符串拼接，再赋值到css()中，这样处理会省掉中间很多不必要的转换操作，有兴趣的同学可亲身感受下，呵。

2、给进度条加动感展示效果：一png背景图+css3的animation、keyframes+伪元素:before/:after。值得注意的是：CSS伪元素不是DOM元素，因此你无法直接选择到它们。变通的做法是：为该元素添加新类选择器，并通过设置新类选择器的属性来达到改变伪元素属性的效果。详细可参考：https://www.jb51.net/article/52992.htm

完整源码：

*{margin: 0;padding: 0;}

body{padding: 50px;}

.progressbar{width: 600px;height: 16px;line-height: 16px;background-color: #bbb;border-radius: 8px;overflow: hidden;}

.progressbar .pb_inner{width:0;height: 100%;border-radius: 8px;background:-webkit-linear-gradient(#7EEA19, #53AD00);background:-o-linear-gradient(#7EEA19, #53AD00);background:linear-gradient(#7EEA19, #53AD00);text-align: center;color: #fff;font-weight: bold;position: relative;}

.progressbar .pb_inner:before{display: block;content:"";width: 100%;height: 100%;position: absolute;left:0;top: 0;border-radius: 8px;background:url(https://www.phpvar.com/phpvar/wp-content/uploads/wenli.png) repeat center top;opacity: .3;

filter: alpha(opacity=30);

-webkit-animation: bgMove 1500ms linear infinite;

-o-animation: bgMove 1500ms linear infinite;

animation: bgMove 1500ms linear infinite;

}

@-webkit-keyframes bgMove {

from { background-position: 0 0;}

to { background-position: 0 -64px;}

}

@-o-keyframes bgMove {

from { background-position: 0 0;}

to { background-position: 0 -64px;}

}

@-moz-keyframes bgMove {

from { background-position: 0 0;}

to { background-position: 0 -64px;}

}

@keyframes bgMove {

from { background-position: 0 0;}

to { background-position: 0 -64px;}

}

.progressbar .pb_inner:after{width: 64px;height: 100%;content: "";display: block;border-radius: 8px;position: absolute;right: 0;top: 0;background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);}

.progressbar .hideAni:before,.progressbar .hideAni:after{display: none;}

// 实例开始

(function(){

var obj=$(".pb_inner");

var i=0;

var showProgress=function(args){

obj.css("width",(++i)+"%");

obj.text(i+"%");

var args=arguments;

var st=setTimeout(function(){

args.callee();

},50);

if(i>=100){

$(".progressbar .pb_inner").addClass('hideAni');

clearTimeout(st);

}

}();

})();

提示：你可以先修改部分代码再运行。

结合运用css3新属性+jq能做出很多很好看、很有创意的效果，但这过程中实现思路以及遇到问题会变通处理的思维方式 会显示更加重要！ 功力尚浅，路还很长.....