Цифровые часы с будильником на JavaScript + HTML

Вы когда-нибудь хотели создать свой собственный будильник, но вам не хватало необходимых инструментов и оборудования? Почему бы не сделать его с помощью 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-код прост и имеет раздел времени, раздел будильника, место для звука будильника и кнопку.

Наши часы 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 и времени, которые будут использоваться в проекте. После того, как у него есть переменные, он создает часы и добавляет текущее время, которое меняется каждую секунду, чтобы реализовать цифровые часы на основе секунд.

Затем он устанавливает сигнал тревоги на основе переменной this.alarmTime, отправленной в конструктор.

Наконец, он реализует второе изменение, используя setInterval. Это позволит перезапускать код каждую секунду.

Основываясь на следующем коде, он проверит, нужно ли ему воспроизводить сигнал тревоги.

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;
        }
    }
}

Заключение

Это даст вам простые часы с функцией будильника, которую вы можете использовать на своем веб-сайте или в качестве простого будильника на своем локальном компьютере.

ПРИМЕЧАНИЕ Чтобы использовать элемент audio с современными политиками браузера, необходимо взаимодействие с пользователем. Если вы используете это как личный будильник, вы можете просто «Разрешить аудио» в настройках вашего сайта в браузере. Если вы используете это как общедоступный будильник, вам нужно будет добавить на страницу кнопку, которая позволит пользователю взаимодействовать с аудиоэлементом.

Цифровые часы с будильником на JavaScript + HTML