반응형
이벤트 핸들러가 뭔지 모른다면? => [개발/웹(html,javascript)] - 자바스크립트(javascript) 이벤트 핸들러
마우스를 글자에 갖다대면 글자색을 무작위로 바꾸기
이벤트 속성 : onmouseover(마우스 갖다대면)
<script type="text/javascript">
function changeRGB(){
var text = document.getElementById("test1");
// 이벤트가 발생한 id가 "test1"인 객체를 찾아서 text변수에 넣는다.
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
// 0~255값을 랜덤으로 뽑아내서 각각의 변수 r,g,b 에 들어간다.
var random_color = "rgb(" + r + "," + g + "," + b + ")";
// random_color = rgb(r,g,b)
text.style.color = random_color;
// text(test1)에 색상을 바꿉니다.
}
</script>
<html>
<body>
<h1 id="test1" onmouseover="changeRGB();">TEST text</h1>
</body>
</html>
근데 글자색이 한번 바뀌고 끝나죠?
글자색을 계속 바뀌게 하려면 글자에 마우스를 갖다대고 있는 동안
changeRGB() 함수가 계속 불러져야되죠.
javascript에는 일정시간마다 함수 호출 해주는 함수가 있습니다. 바로...
setInterval(function, ms_time); // ms_time = 1000분의 1초
clearInterval(timer); // 타이머 멈추기
위에 함수로 글자색을 랜덤하게 계속 바꿔볼게요.
Interval 함수 적용
이벤트 속성 : onmouseout(마우스 벗어나면)
<script type="text/javascript">
var timer; // 타이머셋팅을 위한 변수 설정
function onOver() {
timer = setInterval(changergb, 175);
// 0.175초마다 changergb 함수가 호출된다.
}
function onOut() {
clearInterval(timer); // 타이머 멈추기
var text = document.getElementById("test1");
text.style.color = "rgb(0,0,0)";
// 마우스를 벗어나면 색깔 원래대로 바꾸기
}
function changergb(){
var text = document.getElementById("test1");
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var random_color = "rgb(" + r + "," + g + "," + b + ")";
text.style.color = random_color;
}
</script>
<html>
<body>
<center>
<h1 id="test1" onmouseover="onOver();" onmouseout="onOut();">TEST text</h1>
</center>
</body>
</html>
근데 만약 만들려는 텍스트가 여러개라면 어떻게 해야될까요?
document.getElementById("test1"); => document.getElementById(my_id);
이벤트가 발생할 때 this를 통해 id값을 넘겨주면 됩니다.
<script type="text/javascript">
var timer;
var my_id;
function onOver(this_id) {
my_id = this_id;
timer = setInterval(changergb, 175);
}
function onOut(this_id) {
clearInterval(timer);
var text = document.getElementById(this_id);
text.style.color = "rgb(0,0,0)";
}
function changergb(){
var text = document.getElementById(my_id);
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var color = "rgb(" + r + "," + g + "," + b + ")";
text.style.color = color;
}
</script>
<html>
<body>
<!-- this.id = 해당태그의 id값이 넘어감 ->
<h1 id="test1" onmouseover="onOver(this.id);" onmouseout="onOut(this.id);">TEST text1</h1>
<h1 id="test2" onmouseover="onOver(this.id);" onmouseout="onOut(this.id);">TEST text2</h1>
<h1 id="test3" onmouseover="onOver(this.id);" onmouseout="onOut(this.id);">TEST text3</h1>
</body>
</html>반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| html 프레임을 이용해서 페이지분할하기 (0) | 2017.06.02 |
|---|---|
| 로그인 폼 작성 (0) | 2017.06.02 |
| 버튼으로 배경색과 글자색 바꾸기 (0) | 2017.06.02 |
| 이벤트 팝업창 띄우기 (0) | 2017.06.01 |
| 자바스크립트(javascript) 이벤트 핸들러 (0) | 2017.05.01 |