console
<html>
<head>
<meta charset="utf-8"/>
<title>N o n e</title>
</head>
<style>
*{
padding:0px;
margin:0px;
}
button{
width: 200px;
height: 40px;
}
#box{
width: 200px;
height: 200px;
background-color: black;
position: fixed;
left: -200px;
}
#call{
position:absolute;
width: 20px;
height: 20px;
background-color: red;
right: -20px;
top: calc(50% - 10px);
}
</style>
<body>
<button id="btn">Start</button>
<button id="btn2">back</button>
<div id="box">
<span id="call"></span>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
var box = document.getElementById('box');
var call = document.getElementById('call');
btn.onclick=function(){move(-200,50,1)}
btn2.onclick=function(){
box.style.left=-200+"px";
}
call.onclick=function(){
move(-200,0,20);
}
function move(start,end,size){
clearInterval(timer);
var number=start;
var timer = setInterval(function(){
if(number>=end){
clearInterval(timer);
}else{
box.style.left=number+"px";
}
number+=size;
},30);
}
</script>
</html>