반응형
[JavaScript] 자바스크립를 활용하여 시간 지나면 자동 새로고침과 키보드 입력시 초기화 하는 방법 !!
안녕하세요.
아무 행동없이 있을 때 자동으로 새로고침 되는 코드입니다 ㅎ
html로 카운트 표시했고, 키 입력시 콘솔에 입력 된 키보드입력 값 찍어놨으니 한번 확인해보세요 !
예제코드
<!DOCTYPE html>
<html>
<head>
<title>자동 새로고침 타이머</title>
</head>
<body>
<div>타이머: <span id="timer">300</span>초 남음</div>
</body>
</html>
<script>
var timeout;
var timeLeft = 300; // 총 시간 (초)
function startTimer() {
timeout = setInterval(function() {
timeLeft--;
updateDisplay();
if (timeLeft <= 0) {
location.reload();
}
}, 1000);
}
function resetTimer(event) {
console.log('키보드 입력 감지:', event.key);
timeLeft = 300; // 타이머 재설정
clearInterval(timeout);
updateDisplay();
startTimer();
}
function updateDisplay() {
document.getElementById('timer').textContent = timeLeft;
}
document.addEventListener('keydown', resetTimer);
startTimer();
</script>결과값
타이머: 300초 남음
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문자열내에서 엔터(줄바꿈) 적용되게 하는법 !! (0) | 2023.11.27 |
|---|---|
| [JavaScript] ChatGPT API 를 활용하여 나만의 인공지능 비서만드는 방법2 !! (4) | 2023.11.24 |
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !! (0) | 2023.10.18 |
| [JavaScript] 자바스크립를 활용하여 숫자맞추기 게임 만들기 (up&down game) (0) | 2023.10.17 |
| [JavaScript] 글자 타이핑 하는 효과 내는 방법 !! (Typed.js 라이브러리 활용) (0) | 2023.08.05 |
댓글