<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页进度条实现</title>
</head>
<style>
clip 裁切的意思,当进度条超过文字时,文字由黑色变成白色,我们是通过样式实现的,实际上是两个层, 第二个0是裁切的位置!
#progressBox{ width:300px; height:40px; border:1px solid #C8C8C8; background:white; position:relative;}
#progressBar{ position:absolute; left:0; top:0; z-index:2; height:40px; width:100%; line-height:40px; color:white; text-align:center; font-size:20px; font-weight:bold; font-family:Georgia; clip:rect(0px, 0, 40px, 0px); background:#00A1F5;}
#progressText { position:absolute; left:0; top:0; z-index:1; width:100%; height:40px; line-height:40px; color:black; text-align:center; font-size:20px; font-weight:bold; font-family:Georgia;}
</style>
<script>
window.οnlοad=function(){
var iNow=0;//百分比
var timer=setInterval(function(){
if(iNow==100){
clearInterval(timer);
}
else{
iNow+=1;
progressFn(iNow);
}
},30)
//1. 硬编码 : 写死的数据
//2. 跟flash配合 ：as3
//3. html5 : xhr 2 : onprogress onload
var oDiv1 = document.getElementById('progressBox');
var oDiv2 = document.getElementById('progressBar');
var oDiv3 = document.getElementById('progressText');
var allWidth=parseInt(getStyle(oDiv1,'width'));//获得总宽度300排序，然后parseInt取整数，300
oDiv2.innerHTML = cent + '%';
oDiv3.innerHTML = cent + '%';
oDiv2.style.clip = 'rect(0px, '+ cent/100 * allWidth +'px, 40px, 0px)';
//写一个获取样式的函数,attr是属性
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
};
};
};
</script>
<body>
<div id="progressBox">
<div id="progressBar">0%</div>
<div id="progressText">0%</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>网页进度条实现</title>
</head>
<style>
clip 裁切的意思,当进度条超过文字时,文字由黑色变成白色,我们是通过样式实现的,实际上是两个层, 第二个0是裁切的位置!
#progressBox{ width:300px; height:40px; border:1px solid #C8C8C8; background:white; position:relative;}
#progressBar{ position:absolute; left:0; top:0; z-index:2; height:40px; width:100%; line-height:40px; color:white; text-align:center; font-size:20px; font-weight:bold; font-family:Georgia; clip:rect(0px, 0, 40px, 0px); background:#00A1F5;}
#progressText { position:absolute; left:0; top:0; z-index:1; width:100%; height:40px; line-height:40px; color:black; text-align:center; font-size:20px; font-weight:bold; font-family:Georgia;}
</style>
<script>
window.οnlοad=function(){
var iNow=0;//百分比
var timer=setInterval(function(){
if(iNow==100){
clearInterval(timer);
}
else{
iNow+=1;
progressFn(iNow);
}
},30)
//1. 硬编码 : 写死的数据
//2. 跟flash配合 ：as3
//3. html5 : xhr 2 : onprogress onload
//4. 跟后台的配合 ：ajax实时的返回数据
//百分比cent这个数据要通过上述4种方法的任一种获得
function progressFn(cent){var oDiv1 = document.getElementById('progressBox');
var oDiv2 = document.getElementById('progressBar');
var oDiv3 = document.getElementById('progressText');
var allWidth=parseInt(getStyle(oDiv1,'width'));//获得总宽度300排序，然后parseInt取整数，300
oDiv2.innerHTML = cent + '%';
oDiv3.innerHTML = cent + '%';
oDiv2.style.clip = 'rect(0px, '+ cent/100 * allWidth +'px, 40px, 0px)';
//写一个获取样式的函数,attr是属性
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
};
};
};
</script>
<body>
<div id="progressBox">
<div id="progressBar">0%</div>
<div id="progressText">0%</div>
</div>
</body>
</html>
3060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
