写进度条小案例：代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
*{margin: 0;padding: 0;}
#box{width:800px;height:35px;background:#ccc;border-radius:5px;margin:100px auto;position:relative;line-height: 35px;}
#box #box_1{width:0px;height:100%;background:red;position:absolute;left:0;top:0;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
#box #drag{height:50px;width:25px;position:absolute;top:-7px;left:0px;border-radius:5px;background:red;cursor:pointer;}
#box #percent{position:absolute;right:-50px;top:0px;}
</style>
</head>
<body>
<div id = "box">
<div id = "box_1"></div>
<span id = "drag"></span>
<div id="percent">0%</div>
</div>
</body>
<script>
var box = document.getElementById("box");
var box_1 = box.children[0];
var drag = box.children[1];
var percent = box.children[2];
drag.onmousedown = function(e){
var e = e || window.event ;
var X = e.clientX - drag.offsetLeft;
document.onmousemove = function(e){b
var e = e || window.event ;
var X1 = e.clientX - X;
if(X1 < 0){
X1 = 0;
}else if(X1 > box.offsetWidth - drag.offsetWidth){
X1 = box.offsetWidth - drag.offsetWidth;
}
drag.style.left = X1 +"px";
box_1.style.width = X1 +"px";
percent.innerHTML = parseInt(X1/(box.offsetWidth-drag.offsetWidth)*100) + "%" ;
return false;
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</html>
一开始在onmousemove这一块最后没有写return false;导致进度条拖拽出现bug，例如鼠标点击时无反应，松开点击再移动时进度条也会改变，
出现的原因是虽然再onmouseup中将onmousemove设置为空，但在onmousemove这个方法不知什么原因并没有结束，而且一个为空，一个不为空，
运行中也发生了冲突。return：false；则是结束onmousemove这个方法。这样再在onmouseup中设置onmousemove = null，就不会在发生冲突了。
另外：
retrun true； 返回正确的处理结果。
return false；返回错误的处理结果，终止处理。
return；把控制权返回给页面。