JavaScript + HTML의 알람 기능이 있는 디지털 시계

21126 단어 javascripttutorialbeginnerswebdev
나만의 알람 시계를 만들고 싶었지만 필요한 도구와 하드웨어가 부족한 적이 있습니까? 음, JavaScript와 HTML을 사용하여 하나를 만들어 보지 않겠습니까?

이 튜토리얼에서는 시간을 디지털로 표시하고 작동하는 알람을 설정하는 기능을 제공하는 자신만의 알람 시계를 만드는 방법을 보여줍니다. 바닐라 JavaScript, HTML 및 CSS만 사용하는 간단한 코드입니다.

단 30분 만에 나만의 알람 시계를 만드세요.

YouTube에서 보기





파일 구조




index.html
/sass
     style.scss
/js
     clock.js
/css (generated by Sass)
   style.css
   style.min.css
/sounds
   alarm.mp3
bg.jpg
logo.png


우리의 HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock with Alarm</title>
    <link rel="stylesheet" href="/css/style.min.css">
</head>
<body>
    <div class="main">
        <div id="time"></div>
        <div id="alarm">
            <span></span>
            <button type="button" id="turnoff_alarm">Turn Off Alarm</button>
            <audio id="alarm_audio" loop muted autoplay src="/sounds/alarm.mp3"></audio>
        </div>
    </div>
    <script src="/js/clock.js"></script>
</body>
</html>


기본 HTML은 간단하며 시간 div, 알람 div, 알람 오디오 위치 및 버튼이 있습니다.

우리 시계 JS 클래스




class Clock {
    constructor(timeDiv, alarmDiv, alarmTime) {
        this.timeDiv = timeDiv; // div to display time
        this.alarmDiv = alarmDiv; // div to display alarm
        this.alarmTime = alarmTime; // time to set alarm
        this.alarmAudio = document.querySelector(this.alarmDiv + " #alarm_audio"); // audio element to play alarm

        // set time on initial load
        let tim = document.querySelector(this.timeDiv);
        let t = new Date();
        let time = t.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
        tim.innerHTML = time;

        // set alarm on initial load
        this.setAlarm();

        // update time every second
        setInterval(this.updateTime.bind(this), 1000);
    }

    updateTime() {
        let tim = document.querySelector(this.timeDiv);
        let t = new Date();
        let time = t.toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
        });
        tim.innerHTML = time;

        if (time == this.alarmTime) {
            this.playAlarm();
        }
    }

    setAlarm() {
        const alarm = document.querySelector(this.alarmDiv + " span");
        alarm.innerText = `Alarm (${this.alarmTime})`;
    }

    /**
     * Play alarm when the time matches the alarm time
     */
    playAlarm() {
        this.alarmAudio.currentTime = 0; // reset audio to start
        this.alarmAudio.muted = false; // unmute audio
        this.alarmAudio.volume = 0.5; // set volume
        this.alarmAudio.play(); // play audio

        document.querySelector(this.alarmDiv + " button").style.display = "block";
        document
            .querySelector(this.alarmDiv + " button")
            .addEventListener("click", () => this.turnOffAlarm(this.alarmAudio));
        document.body.style.background = "#38a4ef";
    }

    turnOffAlarm(alarmAudio) {
        alarmAudio.muted = true; // mute audio
        document.querySelector(this.alarmDiv + " button").style.display = "none";
        document.body.style.background = 'url("/bg.jpg")';
    }
}


이것은 프로젝트에서 사용될 div 및 시간에 대한 변수를 수집하는 간단한 클래스입니다. 변수가 있으면 시계를 생성하고 1초마다 바뀌는 현재 시간을 추가하여 초 기반 디지털 시계를 구현합니다.

그런 다음 생성자에게 전송된 this.alarmTime 변수를 기반으로 알람을 설정합니다.

마지막으로 setInterval 를 사용하여 두 번째 변경 사항을 구현합니다. 이렇게 하면 1초에 한 번씩 코드를 다시 실행할 수 있습니다.

다음 코드를 기반으로 알람을 재생해야 하는지 확인합니다.

if (time == this.alarmTime) {
    this.playAlarm();
}


시간이 사용자가 설정한 값과 같으면 playAlarm 메서드를 실행합니다. playAlarm 메서드는 배경에서 음악을 시작하고 배경색을 변경합니다. 이 작업이 완료되면 사용자가 알람을 끄고 전체 프로세스를 다시 시작할 수 있도록 버튼을 추가합니다.

Clock 클래스를 초기화하려면 내 코드를 그대로 복사하는 경우 기본 JS 파일이나 HTML에 다음 코드를 추가하기만 하면 됩니다.

new Clock('#time', '#alarm', '02:38:00 PM')


시계 스타일



시계 스타일은 단순하며 시계 자체에 대한 큰 형식의 텍스트가 있는 배경 이미지만 표시합니다.

body {
    font-family: 'Fjalla One', sans-serif;
    text-align:center;
    background-color:#000;
    position: relative;
    height:100vh;
    overflow:hidden;
    background-image:url('/bg.jpg');
    background-size:cover;
}

.main {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -60%);
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    #time {
        color:#fff;
        text-shadow: 3px 3px 0px #6d6d6d;
        font-size:100px;
        margin: 1rem 0;
    }
    #alarm {
        color: rgba(255,255,255,.5);
        font-size:30px;
        button {
            background-color: transparent;
            border:1px solid #fff;
            color:#fff;
            padding:15px 20px;
            font-size:20px;
            cursor: pointer;
            width:250px;
            margin:20px auto;
            display:none;
        }
    }
}


결론



이렇게 하면 웹사이트에서 사용할 수 있는 알람 기능이 있는 간단한 시계를 제공하거나 로컬 컴퓨터에서 간단한 알람으로 사용할 수 있습니다.

참고 최신 브라우저 정책과 함께 오디오 요소를 사용하려면 사용자 상호 작용이 있어야 합니다. 이것을 개인 알람으로 사용하는 경우 브라우저의 사이트 설정에서 "오디오 허용"만 하면 됩니다. 이것을 공개 알람으로 사용하는 경우 사용자가 오디오 요소와 상호 작용할 수 있도록 페이지에 버튼을 추가해야 합니다.
Rails6에서 jQuery를 도입하는 방법
Python에서 플러그인 아키텍처 생성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage