js学习进度条
鼠标可以拖动紫色区域来实现滑动，同时通过localStorage来实现记录上次所在位置，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#main{margin: 100px auto;width: 500px;height: 20px;border: 1px solid red;position: relative;}
#black{width: 40px;height: 100%;background-color: purple;position: absolute;left:0px;top: 0px;}
#full{width: 0px;height: 100%;background-color: bisque;position: absolute;left: 0px;top: 0px;}
</style>
<script>
window.onload = function(){
var full = document.getElementById("full");
var main = document.getElementById("main");
var black = document.getElementById("black");
if(!window.localStorage){
alert("a");
}else{
var l = localStorage.getItem("len")?localStorage.getItem("len"):0;
black.style.left=l+'px';
full.style.width=l+'px';
}
black.onmousedown = function(ev){
var offset = ev.clientX-black.offsetLeft;
document.onmousemove = function(ev){
var l = ev.clientX-offset;
if(l<0){
l=0;
}else if(l>460){
l=460;
}
black.style.left=l+'px';
full.style.width=l+'px';
if(!window.localStorage){
alert("a");
}else{
localStorage.len=l;
}
}
}
document.onmouseup = function(){
document.onmousemove=null;
}
}
</script>
</head>
<body>
<!-- 有记忆功能的进度条 -->
<div id="main">
<div id="full"></div>
<div id="black"></div>
</div>
</body>
</html>
