模仿进度条效果
进度条效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#progress{width: 400px; height: 30px; border: 1px solid black; position: relative;}
#fill{position: absolute; top: 0px; left: 0px; width: 0px; height: 30px; background-color: red}
#score{line-height: 30px; position: absolute; right: 0px}
</style>
<script>
/*
电影 1秒是24帧
人眼能识别的最小的时间间隔是18帧。
*/
window.onload = function(){
var oProgress = document.getElementById("progress");
var oFill = document.getElementById('fill');
var oScore = document.getElementById('score');
var speed = 2;
var timer = setInterval(function(){
var currentWidth = parseInt(getStyle(oFill, "width"));
//计算百分比
oScore.innerHTML = parseInt(currentWidth / 400 * 100) + "%";
if(currentWidth == 400){
clearInterval(timer);
}else{
oFill.style.width = currentWidth + speed + 'px';
}
}, 30);
}
/*---------------封装的获取当前有效属性函数的兼容写法--------*/
// 浏览器兼容写法
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
}
/*---------------封装的获取当前有效属性函数的兼容写法end--------*/
</script>
</head>
<body>
<div id = "progress">
<div id = 'fill'></div>
<span id = 'score'>0%</span>
</div>
</body>
</html>
浏览器效果：
仔细观看上面到最后的时候好像，没完全到头，下面代码是发现后修改的。
补充(略修改)：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>进度条</title> 6 <style> 7 #progress {width: 400px;height: 30px;border: 1px solid black;position:relative;} 8 #in {width:0px;height:30px;background:cyan;position:absolute;left:0;} 9 #num {line-height: 30px;position:absolute;right:0;} 10 </style> 11 <script> 12 window.onload = function(){ 13 var oIn = document.getElementById('in'); 14 var oNum = document.getElementById('num'); 15 //每次增长的速度 16 var speed = 2; 17 //设置计时器, 每隔30ms执行一次 18 var timer = setInterval(function(){ 19 //获取当前有效样式 20 var cur = parseInt(getStyle(oIn, 'width')); 21 //设置增加后的宽度 22 oIn.style.width = cur + speed + 'px'; 23 24 //计算增加后的百分数（整数）并输出到页面 25 oNum.innerHTML = parseInt((cur + speed) / 400 * 100)+ '%'; 26 27 //判断增加后的宽度是否增长到头 28 if(cur + speed == 400){ 29 //清除计时器 30 clearInterval(timer); 31 } 32 33 },30) 34 } 35 36 /*------------封装获取当前有效样式的函数-------------*/ 37 function getStyle(node, styleType){ 38 return node.currentStyle? node.currentStyle[styleType] : getComputedStyle(node)[styleType]; 39 } 40 /*------------封装获取当前有效样式的函数end-------------*/ 41 42 </script> 43 </head> 44 <body> 45 <div id="progress"> 46 <div id="in"></div> 47 <span id="num">0%</span> 48 </div> 49 </body> 50 </html>
浏览器效果：
通过上图，可以看出这次刚刚好。
