• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 브라우저 API - 타이머

mousemove 이벤트

mousemove 이벤트는 사용자가 마우스를 움직일 때마다 발생합니다. 이 이벤트를 사용하여 마우스의 현재 위치를 추적할 수 있습니다. 예제에서는 mousemove 이벤트를 통해 가짜 마우스를 따라 움직이는 해머 이미지를 구현합니다.

html {
	cursor: none;
}

.CSS_가짜마우스 {
	position: absolute;
	width: 100px;
	z-index: 999;
}

window.addEventListener("mousemove", (event) => {
	const 가짜마우스 = document.getElementById("HTML_가짜마우스");
	가짜마우스.style.top = `${event.clientY + 5}px`; /* 진짜마우스에서 5만큼 떨어뜨리기(아래 클릭 가능하도록) */
	가짜마우스.style.left = `${event.clientX + 5}px`; /* 진짜마우스에서 5만큼 떨어뜨리기(아래 클릭 가능하도록) */
})

• 사용자가 마우스를 움직이면 mousemove 이벤트가 발생합니다.
• 이벤트 핸들러가 호출되어 event 객체를 전달받습니다. event 객체에는 마우스의 현재 위치 정보(clientX, clientY)가 포함되어 있습니다.
• 가짜 마우스 이미지의 top 및 left 스타일 속성을 마우스의 현재 위치를 기준으로 업데이트하여 가짜 마우스 이미지를 움직입니다.

setTimeout

setTimeout 함수는 지정한 시간이 지난 후에 한 번 실행할 코드를 설정합니다.

setTimeout(function, delay);

• function: 지연 시간이 지난 후에 실행될 함수입니다.
• delay: 밀리초 단위로 지정된 지연 시간입니다. 1초는 1000밀리초입니다.

setInterval

setInterval 함수는 지정한 시간 간격으로 반복적으로 함수를 실행합니다.

setInterval(function, interval);

• function: 지정된 시간 간격으로 반복 실행할 함수입니다.