进度条效果
<!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>
浏览器效果：
