<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!---------------------------------------!>
<style media="screen">
div {
border : 1px solid blue;
width : 100px;
height : 100px;
text-align : center;
vertical-align : middle;
line-height : 100px;
left : 300px;
top : 300px;
position : absolute;
}
</style>
<!---------------------------------------!>
<script type="text/javascript">
// 박스의 초기 위치
let divLeft = 0;
let divTop = 300;
let handleGo = null;
function moveDiv(left,top) {
let aDiv = document.querySelector("div");
aDiv.style.left = left + 'px';
aDiv.style.top = top + 'px';
aDiv.innerHTML = `(${divLeft}, ${divTop})`;
}
function goRight() {
divLeft += 10;
moveDiv(divLeft, divTop);
}
function moveStop() {
clearInterval(handleGo);
}
window.onload = function () {
// 박스 위치를 초기화 한다.
moveDiv(divLeft, divTop);
handleGo = setInterval(goRight, 100);
// STOP 버튼의 click 이벤트 핸들러 등록한다.
document.getElementById("moveStop").addEventListener("click", moveStop);
}
</script>
<!---------------------------------------!>
</head>
<body>
<h1>Div Moving Control</h1>
<hr>
<button type="button" id="moveLeft">Left</button>
<button type="button" id="moveRight">Right</button>
<button type="button" id="moveStop">Stop</button>
<hr>
<div>Javascript</div>
</body>
</html>
