js小案例-进度条的简单效果
通过JS实现进度条的简单效果，案例很简单，了解就行
知识点扩展
运动的原理：控制某个样式不断的改变，就有动画效果，这里我们通过改变宽度来达到效果，
* 进度条 width不断变大
* offsetLeft 获取盒子到有定位的父节点的left值
* offsetTop 获取盒子到有定位的父节点的top值
* offsetWidth 获取盒子的width值
* offsetHeight 获取盒子的height值
* offsetParent 获取有定位的父节点
可视区的宽高：
* 宽度： window.innerWidth
* 高度： window.innerHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 0;
height: 10px;
background: #58bc58;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="plan"></div>
</body>
<script>
(function () {
var box = document.getElementById('box');
var plan = document.getElementById('plan');
var seep = 20;
function show() {
var widthr = box.offsetWidth + seep; //每次刷新改变宽度
if (widthr >= window.innerWidth) { //判断宽度是否到达可视区
widthr = window.innerWidth;
clearInterval(timer); //关闭定时器
}
var num = parseInt(widthr / window.innerWidth * 100) + '%'; //每次进度的百分比
plan.innerHTML = num;
plan.style = 'text-align:right;width:' + num + ';background:#fff;'
box.style.width = widthr + 'px';
}
var timer = setInterval(show, 100); //定时器
})();
</script>
</html>
