鼠标拖拽回放

<html>
<head>
<title>拖拽回放</title>
<meta charest="utf-8">
<style>
div{ 80px;height: 80px;background: red;position: absolute;}
</style>
<script>
window.onload=function(){
var oInp=document.getElementsByTagName('input')[0];
var oDiv=document.getElementsByTagName('div')[0];
var Left=[];
var Top=[];
oDiv.onmousedown=function(ev){
ev=ev || event;
var ms_b=ev.clientX-oDiv.offsetLeft;
var ms_t=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
ev=ev || event;
var currX=ev.clientX-ms_b;
var currY=ev.clientY-ms_t;
var Width=document.body.clientWidth || document.documentElement.cilentWidth;
var Height=document.body.clientHeight || document.documentElement.cilentHeight;
Left.push(currX);
Top.push(currY);
//console.log(Left.length);
if(currX<0) {currX=0;}
else if(currX>Width-oDiv.clientWidth){
currX=Width-oDiv.clientWidth;
}
if(currY<0) {currY=0;}
else if(currY>Height-oDiv.clientHeight){
currY=Height-oDiv.clientHeight;
}
oDiv.style.left=currX +'px';
oDiv.style.top=currY +'px';
return false;
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
}
var timer=null;
oInp.onclick=function(){
console.log(Top.length);
var i=Left.length;
timer=setInterval(function(){
oDiv.style.left=Left[i] +'px';
oDiv.style.top=Top[i] + 'px';
i--;
if(i==0) {
Left=[];
Top=[];
clearInterval(timer);
}
},1)
}
}
</script>
</head>
<body>
<input type="button"value='回放'>
<div></div>
</body>
</html>