라면 타이머
코드 설명
- $(document).ready(): DOM이 완전히 로드된 후 실행되는 코드를 설정합니다.
- $('#startTimer').click(): 타이머 시작 버튼 클릭 시 실행되는 기능을 설정합니다.
- parseInt($('#minutes').val()): 입력된 분 값을 정수로 변환합니다.
- setInterval(): 매초마다 타이머를 업데이트하는 함수입니다.
- Math.floor(totalSeconds / 60): 남은 시간을 분 단위로 계산합니다.
- clearInterval(): 타이머가 종료되면 실행을 중지하는 함수입니다.
- alert(): 타이머가 종료될 때 사용자에게 알림을 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라면 타이머</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
input { width: 50px; }
</style>
</head>
<body>
<h1>라면 타이머</h1>
<label for="minutes">시간(분): </label>
<input type="number" id="minutes" min="1" value="3">
<button id="startTimer">타이머 시작</button>
<div id="timerDisplay" style="margin-top: 20px;"></div>
<script>
$(document).ready(function() {
$('#startTimer').click(function() {
let minutes = parseInt($('#minutes').val());
let totalSeconds = minutes * 60;
let timer = setInterval(function() {
let minutesLeft = Math.floor(totalSeconds / 60);
let secondsLeft = totalSeconds % 60;
$('#timerDisplay').text(minutesLeft + "분 " + secondsLeft + "초 남았습니다.");
if (totalSeconds <= 0) {
clearInterval(timer);
alert("타이머가 종료되었습니다! 라면을 드세요!");
}
totalSeconds--;
}, 1000);
});
});
</script>
</body>
</html>
'Jquery' 카테고리의 다른 글
| jQuery로 숫자만 입력 가능하게 (10) | 2025.03.08 |
|---|---|
| [jQuery]로 드롭다운 내용 채우기 및 원하는 값 선택하기 (0) | 2025.03.05 |
| [JQuery]로 테이블에 행 추가하는 방법 (0) | 2025.03.05 |
| [Jquery]로 특정 위치 태그에서 텍스트 가져오는 방법 (0) | 2025.03.05 |
| [Jquery]로 마지막 TR 제거 방법 (0) | 2025.03.05 |
