★ 이미지 움직이기
☆ setTimeOut & setInterval & clearInterval
◎ 함수에 따옴표 붙일것!!! - 안그러면 밀리 세컨드를 인식하지 못함
/* 프로그램 실행시 바로 발동되는 함수 */
window.onload=function (){
/* 2초뒤에 색변환 로직 */
/* 함수에 따옴표 붙일것!!! - 안그러면 밀리 세컨드를 인식하지 못함*/
setTimeout("colorChange()",2000);
/* 0.5초마다 자동이동 */
setInterval(autoMove(),500);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!-- CSS -->
<style type="text/css">
div {
position: relative;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<!-- 자바 스크립트 -->
<script type="text/javascript">
/* div 기본 위치 변수 */
var x = 100;
/* 반복되는 시간 설정 변수 */
var intervalId;
/* 프로그램 실행시 바로 발동되는 함수 */
window.onload=function (){
/* 2초뒤에 색변환 로직 */
/* 함수에 따옴표 붙일것!!! - 안그러면 밀리 세컨드를 인식하지 못함*/
setTimeout("colorChange()",2000);
/* 0.5초마다 자동이동 */
/* 멈출때를 대비해 변수화 */
intervalId = setInterval("autoMove()",500);
}
/* 시작되고 색변환 함수 파츠 */
function colorChange(){
/* box 스타일-백그라운드 컬러 */
box.style.background="pink";
}
/* 시작되고 자동이동 함수 파츠 */
function autoMove(){
/* x값 10씩 변동 */
x+=10;
/* box 위치 변경 */
box.style.left=x+"px";
}
/* 원위치 */
function initPos(){
/* div 위치조정 */
box.style.left='100px';
/* 증가된 x값 초기화 */
x= 100;
}
/* 멈춤 */
function stopPos(){
/* 타이머 멈추게하기 */
/* clearInterval(인터벌 변수) */
clearInterval(intervalId);
alert("멈춤!!!");
}
/* 이미지 출력 */
function imgWrite(){
img1.src="../image/01.png";
img2.src="../image/02.png";
}
</script>
</head>
<body>
<!-- 움직이는 상자 출력 -->
<div id="box"></div>
<hr>
<!-- 버튼 3개 -->
<input type="button" name="position" value="원위치" onclick="initPos()">
<input type="button" name="stop" value="멈춤" onclick="stopPos()">
<input type="button" name="img" value="이미지 출력" onclick="imgWrite()">
<br>
<img alt="" src="" name="img1">
<img alt="" src="" name="img2">
</body>
</html>
'프로그래밍 > Html CSS JavaScript' 카테고리의 다른 글
| 2021년 9월 29일 - 점점 차오르는 progress bar & 달력 만들기 & Canvas & Canvas로 그림판 만들기 & Jquery 기초 (0) | 2021.09.29 |
|---|---|
| 2021년 9월 28일 - marquee setTimeout & setInterval & 아스키코드 확인 (0) | 2021.09.28 |
| 2021년 9월 27일 - 클릭시 이미지 변경 & getElementById & 이미지 점점 커지게 + 작아지게 + 이미지 배열출력 & 폰트점점 커지게 + 작아지게 + 굵기 조절 (0) | 2021.09.27 |
| 2021년 9월 26일 - 데이터 폼 전송 복습 (0) | 2021.09.26 |
| 2021년 9월 25일 - 1~100 난수 맞추기 게임 복습 (0) | 2021.09.25 |
댓글