<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
div{width:100px;height:100px;background:#000;position:absolute;left:300px;top:300px;}
</style>
<script>
window.onload=function() {
var oInp=document.getElementsByTagName('input')[0];
var oDiv=document.getElementsByTagName('div')[0];
var timer=null;
var sty = parseInt(oDiv.currentStyle?oDiv.currentStyle.left:getComputedStyle(oDiv,0).left);
var num=0;

oDiv.onclick=function(){
clearInterval(timer);
var arr=[];
for(var i=30;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
timer=setInterval(function(){
oDiv.style.left=sty+arr[num]+'px';
num++;
if(num==arr.length){clearInterval(timer);num=0}
},50)
}
}
</script>
<body>
<div></div>
</body>
</html>