<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>013</title>
<style type="text/css">
#redbox
{
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="redbox"></div>
</body>
<script type="text/javascript">
var intervalId = null;
document.getElementById('redbox').addEventListener('click', startBox, false);
function startBox() {
if(intervalId == null){
var x = 100;
intervalId = setInterval(
function(){
x+=5;
var left = x + "px";
document.getElementById("redbox").style.left = left;
}, 100);
} else {
clearInterval(intervalId);
intervalId = null;
}
}
</script>
</html>
