<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href="../css/mystyle.css">
<style>
div{
border : 1px dotted blue;
margin : 10px;
padding : 10px;
height : 150px;
overflow : auto;
}
</style>
<script>
function randomColor(vt){//파람은 지역변수
//vt는 지역변수 이고 gvt는 전역변수이다.
gvt = vt;//지역변수 = 전역변수
vt.style.display = "none";
//id가 d1인 div요소 검색
//vd1 = document.getElementById('d1');
var vd1 = document.querySelector('#d1');
//여기서만 쓰니까 지역변수여야댐
//버튼 한번만 누르면 계속 실행
//a는 전역변수여아한다 선언시 var생략하면 전역변수
a = setInterval(function(){
console.log(a);
cr = parseInt(Math.random()*256);
cg = parseInt(Math.random()*256);
cb = parseInt(Math.random()*256);
cr16 = cr.toString(16);
cg16 = cg.toString(16);
cb16 = cb.toString(16);
vd1.style.background = "#" +cr16 + cg16 + cb16;
}, 500)
}
function stop(){
clearInterval(a);
//확인 버튼 보이기
gvt.style.display = "inline" /*inline일대는 확인 안사라짐*/
}
</script>
</head>
<body>
<pre>
확인버튼 클릭하면 확인버튼은 사라진다
style.display = "none";
종료버튼 클릭하면 확인버튼이 다시 나타난다
style.display = "inline"
</pre>
<div id="d1">
확인 버튼 클릭하면 호출되는 함수의 매개변수로 자기자신을(this) 전달한다.<br>
onclick="randomColor(this)"<br>
<br>
0.5초가 지날때마다 function의 기능을 수행한다<br>
a=setInterval(function(){}, 500)<br>
<br>
setInterval에서 수행되는 기능을 정지 시킨다<br>
clearInterval(a)<br>
</div>
<button type = "button" onclick="randomColor(this)">확인</button>
<button type = "button" onclick="stop()">종료</button>
</body>
</html>
신입 개발자 입니다!!!