<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#myimg{
position: absolute;
}
#btngo{
margin-left: 400px;
width: 150px;
font-size: 20pt;
position: relative;
top: 200px;
}
#btnstop{
margin-left: 10px;
width: 150px;
font-size: 20pt;
position: relative;
top: 200px;
}
</style>
<script type="text/javascript">
var myimg;
var xpos=0;
var ms=100; //setinterval에서 초단위 줄때 사용
window.onload=function(){
myimg=document.getElementById("myimg"); /* 기준점 */
//버튼 go
document.getElementById("btngo").onclick=function(){
inter=setInterval(function() {
myimg.style.left=xpos+"px";
xpos+=10;
},ms);
}
//버튼 stop
document.getElementById("btnstop").onclick=function(){
clearInterval(inter); //setinterval 멈춤 = clearinterval
}
//키보드의 아스키코드값 확인
window.onkeyup=function(e){
console.log(e.keyCode);
/* 4방향키, 엔터의 아스키코드값
엔터13, 상38, 하40, 좌37, 우39*/
}
}
</script>
</head>
<body>
<img alt="" src="../image/08.png" id="myimg">
<br><br>
<button type="button" id="btngo">go!!</button>
<button type="button" id="btnstop">stop!!</button>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210928_image,onkeyup(위치변경) (0) | 2021.09.28 |
|---|---|
| 210928_time,setInterval,setTimeout,image (0) | 2021.09.28 |
| 210928_image,random,marquee,array,button (0) | 2021.09.28 |
| 210928_image,button,zoom-in/out (0) | 2021.09.28 |
| 210927_table,checkbox,radio (0) | 2021.09.28 |