자바스크립트로 제목과 같은 기능을 구현해보자.
핵심은 onmouseover, onmouseout 이벤트와 setInterval(), clearInterval() 메소드를 이용하는 것이다.
onmouseover는 지정된 태그영역 안에 마우스가 위치해있을 때 작동
onmouseout은 지정된 태그영역 바깥에 마우스가 위치해있을 때 작동
b = setInterval(x, a)
x()메소드를 0.00a초마다 호출하겠다는 뜻.
숫자값 b를 리턴한다.
clearInterval(b)
기능은 setInterval()의 정지
b는 setInterval()의 숫자값 b
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>색변경테스트</title>
</head>
<body>
<h1 id="test" style="font-size: 100px;" onmouseover="onOver()" onmouseout="onOut()">색변경 테스트</h1>
<script>
var rr = 0;
var gg = 0;
var bb = 0;
var cnt = 0;
var timer;
function changeColor()
{
var xx = document.getElementById("test");
if(cnt==0)
{
if(rr<255)
{
rr+=5;
}
else if(gg<255)
{
gg+=5;
}
else
{
bb+=5;
if(bb==255)
{
cnt=1;
}
}
}
else
{
if(rr>0)
{
rr-=5;
}
else if(gg>0)
{
gg-=5;
}
else
{
bb-=5;
if(bb==0)
{
cnt=0;
}
}
}
xx.style.color = "rgb("+rr+","+gg+","+bb+")"
}
function onOver()
{
timer = setInterval(changeColor,30);
}
function onOut()
{
var xx = document.getElementById("test");
clearInterval(timer);
xx.style.color = "black";
rr=0;
gg=0;
bb=0;
cnt=0;
}
</script>
</body>
</html>
코드작성을 마치면서...
1. 색지정시 Math.random()메소드를 이용하면 더 다채롭다.
2. changeColor()메소드에서 무한루프를 이용해봤다. onmouseout이벤트가 동작하지 않았다.
3. xx변수를 사용하지 않으려고 각 메소드에 id값 매개변수 x를 이용해서 작성해봤다. 기능이 구현되지 않았다.
4. setInterval()메소드에서 소괄호()안에 들어가는 메소드는 소괄호()가 없다. (주의)
'자바스크립트 JavaScript' 카테고리의 다른 글
| ClassName()으로 Element요소를 가져올 때 유의점 (4) | 2021.06.15 |
|---|---|
| getElementById()없이 id.value가 가능한 이유 (0) | 2021.06.10 |
