HTML,CSS,Js - 디지털 시계 만들기. (시간, 알람, 타이머 기능)

- 사용템플릿

(1) Visual Studio Code

(2) Github

(3) Netlify

 

- 완성된 사이트 주소

https://neon-elf-202055.netlify.app/

디지털 시계와 알람

 

- 완성화면

 

(1) 시작화면

 

(2) 시계 색상 변경 기능

 

(3) 알람화면

 

(4) 타이머 화면

 

(5) 타이머 진행화면

 

(6) 타이머 종료화면 (알람소리까지 재생됨)

 

- 핵심 코드 설명

 

(1) HTML

<div id="alarm" class="category-container">
     <h4>알람 설정</h4>
     <input type="time" id="alarmTime" class="form-control">
     <button class="btn btn-primary mt-2" onclick="setAlarm()">알람 설정</button>
     <div id="alarmMessage" class="mt-3"></div>
</div>

<div id="timer" class="category-container">
     <h4>타이머 설정</h4>
     <div class="d-flex">
         <input type="number" id="timerHours" class="form-control" placeholder="시" min="0">
         <input type="number" id="timerMinutes" class="form-control" placeholder="분" min="0">
         <input type="number" id="timerSeconds" class="form-control" placeholder="초" min="0">
</div>

<audio id="alarmSound" src="./alarm.mp3.mp3"></audio> <!-- 알람 소리 파일 -->

 

(2) CSS

/* 스타일링: 전체 페이지 배경 색상 및 중앙 정렬 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #E0F7FA;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 카테고리 버튼 스타일링 */
.btn-category {
    background-color: #80CBC4;
    border-color: #80CBC4;
    color: white;
    width: 100px;
    margin: 0 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* 시계 스타일링 */
.clock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 타이머 진행 상황을 중간 레이어로 배치 */
.timer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.1);
    transform-origin: bottom;
    transition: height 0.1s;
    z-index: 1; /* 중간 레이어 */
}

 

(3) JS

// 디지털 시계 업데이트 함수
    function updateClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        clockTimeElement.textContent = `${hours}:${minutes}:${seconds}`;

        // 알람 시간 체크
        if (alarmTime && now.getHours() === alarmTime.hours && now.getMinutes() === alarmTime.minutes && now.getSeconds() === 0) {
            showAlert('알람이 울립니다!');
            playAlarmSound(); // 알람 소리 재생
        }
    }

 // 타이머 설정 및 시작 함수
    window.startTimer = function () {
        const timerHours = parseInt(document.getElementById('timerHours').value) || 0;
        const timerMinutes = parseInt(document.getElementById('timerMinutes').value) || 0;
        const timerSeconds = parseInt(document.getElementById('timerSeconds').value) || 0;
        const timerDuration = (timerHours * 60 * 60 + timerMinutes * 60 + timerSeconds) * 1000;

        if (timerDuration <= 0) {
            alert("유효한 시간을 입력해주세요.");
            return;

// 카테고리 전환 함수
    window.showCategory = function (category) {
        document.querySelectorAll('.category-container').forEach(container => {
            container.classList.remove('active');
        });
        document.querySelectorAll('.btn-category').forEach(button => {
            button.classList.remove('active');
        });

        document.getElementById(category).classList.add('active');
        document.getElementById(`btn-${category}`).classList.add('active');

        if (category === 'timer') {
            if (timerProgress.style.height !== '0%') {
                cancelTimerButton.style.display = 'flex'; // 타이머가 진행 중이면 X 버튼 표시
            }
        } else {
            cancelTimerButton.style.display = 'none'; // 타이머 카테고리가 아닌 경우 X 버튼 숨김
        }
    }