<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<link rel="shortcut icon" type="image/x-icon" href="../images/Koala.jpg" >
<script>
str = ["좋은아침", "졸린오후", "신나는 저녁", "행복한 하루", "맛있는 점심"];
function addProc() {
// 랜덤 발생 - 랜덤수에 해당하는 문자를 str배열에서 선택, 정수로 바꿔서 넣어줌
rnd = parseInt(Math.random() * str.length);
// 선택된 문자로 textNode를 생성 : 문자출력
text = document.createTextNode(str[rnd]);
// p태그 생성 : 줄바꿈
ptag = document.createElement('p');
// p태그에 textNode 추가
ptag.appendChild(text);
// p태그를 result1에 추가
document.getElementById('result1').appendChild(ptag);
}
function delProc() {
// 삭제할 대상의 부모 검색
parent = document.getElementById('result1');
child = parent.lastChild; // 마지막 p태그를 선택
parent.removeChild(child);
}
function proc2() {
// 랜덤 생성
random = parseInt(Math.random() * str.length);
// 랜덤 수 번째의 문자를 str배열에서 선택 - textNode로 생성
text = document.createTextNode(str[random]);
// 삭제 button 태그 생성
bttag = document.createElement('input');
bttag.type = "button";
// bttag.setAttribute('type', 'button');
bttag.value = "삭제";
// txt = document.createTextNode("삭제");
// bttag.appendChild(txt);
bttag.onclick = function() {
// 자식이 부모를 지정해서 삭제
// this(자식) = 클릭한 삭제 버튼 / parentNode = p태그
parent = this.parentNode.remove();
};
// p태그 생성
ptag = document.createElement('p');
// p태그에 textNode와 Button을 추가
ptag.appendChild(text);
ptag.appendChild(bttag);
// result2에 p태그 추가
document.getElementById('result2').appendChild(ptag);
}
index = 0;
function start(vt){
gvt = vt; //전역변수
//확인 버튼 사라지게 한다(this: 클릭했을때의 나)
vt.style.display = "none";
//선택된 이미지의 border를 클리어시킨다
//.style.border="none"
//테두리가 지워지는 곳
parent = document.getElementById('result3');
child2 = parent.getElementsByTagName('img')[index];
console.log(parent.getElementsByTagName('img'));
console.log(parent);
child2.style.border = "none";
//그림이 돌아가는 것
//이미지의 부모요소를 검색 - result2
idx = setInterval(function(){//반복을 설정하는것
child = parent.firstChild; //첫번째태그를 선택
//img의 첫번째 요소 - firstChild 선택 result2에 추가 - appendChild
document.getElementById('result3').appendChild(child);
}, 300)
}
function stop(){
//setInterval() 종료 - clearInterval
clearInterval(idx);//깔끔하게 반복 없애기
//랜덤을 발생 - 3,
index = parseInt(Math.random() * 5);
// 5번째 인덱스의 이미지 하나를 선택해서 border를 지정.
//인덱스.style.border = "5px solid red"
parent = document.getElementById('result3');
child = parent.getElementsByTagName('img')[index];
//[index]: 하나만의미 index = ? 몇 부터 몇일까요 여기서
child.style.border = "5px solid red";
//시작버튼이 나타난다
gvt.style.display = "inline";
}
</script>
<style type="text/css">
img{
width : 100px;
height : 100px;
}
</style>
</head>
<body>
<div class="box">
추가버튼 클릭 시<br>
랜덤으로 발생되는 문자를 result1에 출력<br>
<br>
삭제버튼 클릭 시<br>
추가된 문자를 차례대로 삭제<br>
<br>
<button type="button" onclick="addProc()">추가</button>
<button type="button" onclick="delProc()">삭제</button>
<div id="result1"></div>
</div>
<div class="box">
추가삭제버튼 클릭 - 이미지 회전<br>
랜덤으로 발생되는 문자와 삭제버튼을 생성하여 result2에 출력<br>
<br>
<button type="button" onclick="proc2()">추가삭제</button>
<div id="result2"></div>
</div>
<div class = "box">
시작버튼 클릭 시 이미지 회전<br>
첫번째 이미지를 선택하여 appendChild()로 div의 맨 마지막에 추가된다<br>
첫번째 이미지는 잘라내기 붙여넣기와 같은 이동의 효과가 나타난다<br>
시작버튼은 사라진다
종료버튼클릭하면 다시 시작 버튼이 나타나야 되고
당첨을 표시한다
다시 시작버튼 클릭 시 당첨표시를 클리어 후 실행 한다
<br>
<button type = "button" onclick="start(this)">시작</button>
<button type = "button" onclick="stop()">종료</button>
<div id = "result3">
<img src="../images/옷1.jpg" alt="옷1.jpg">
<img src="../images/옷2.jpg" alt="옷2.jpg">
<img src="../images/음악1.jpg" alt="음악1.jpg">
<img src="../images/핫초코.jpg" alt="핫초코.jpg">
<img src="../images/풍차.jpg" alt="풍차.jpg">
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!