onload : 이벤트 객체가 로드될 때 이벤트가 발생한다.
신문 자동 스크롤 내리기 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="viewScroll()">
<pre> 신문내용을 넣으세요. </pre>
<script type="text/javascript">
let posY = 0;
function viewScroll(){
window.scroll(0, posY);
posY = posY + 2;
if(posY == 300) posY = 0; // 300이 되면 초기화(맨 위로 올라간다.)
// 화면이 꽉 차면 움직이지 않는다.
setTimeout( "viewScroll()", 100); // 0.1초마다
}
</script>
</body>
</html>
설명
pre태그 안에 신문 내용을 넣고, 코드를 실행하면 0.1초마다 스크롤이 내려간다.
body태그가 실행될 때 onload 이벤트가 발생하여 viewScroll함수를 실행한다.
함수설명
window.scroll(x-coord, y-coord) : 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 스크롤 이벤트를 발생시키는데 사용(x = 가로, y = 세로)
setTimeout("함수명()", 지연시간(ms)) : 시간 지연 함수, 지연시간 후 실행시킬 때 사용
※ 실행화면을 올리고 싶었는데.. 같은 코드를 실행시 티스토리가 스크롤링이 되어 올리지 못했다...
'IT > JavaScript' 카테고리의 다른 글
| [Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0) | 2021.06.08 |
|---|---|
| [Html+JavaScript] 미술관 및 박물관 링크 이동하기 (0) | 2021.06.07 |
| [Html+JavaScript] onkeydown / onkeypress 이벤트 keyCode얻기 (0) | 2021.06.07 |
| [Html+JavaScript] mouse이벤트/ onmousedown/onmouseup/onmouseover/onmouseout (0) | 2021.06.07 |
| [Html+JavaScript] onblur / onchange 이벤트 (0) | 2021.06.07 |