HomeHTML кодыЧасы для сайта. HTML код для установки.

Часы для сайта. HTML код для установки.

04.10.2025
Просмотров 161

Иногда требуется установить на сайт часы. Простые электронные часы, показывающие реальное время. Есть несколько способов и решений для этой задачи и в интернете они описаны. Тем не менее мы решили опубликовать еще один способ.

Какими буду часы на сайте

🕒 14:30:45 — так они будут выглядеть, хотя размер, цвет и прочие характеристики можно настроить.

Особенности реализации:

  • Часы автоматически обновляются каждую секунду
  • Время отображается в 24-часовом формате
  • Добавлены ведущие нули (например: 09:05:07)
  • Адаптивный дизайн работает на всех устройствах
  • Нет внешних зависимостей (работает без интернета)

HTML+CSS+JavaScript код «Часы для сайт»

<!DOCTYPE html>
<html>
<head>
    <style>
        .clock-container {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            background: #2c3e50;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
        }
 
        #digital-clock {
            font-family: ‘Arial’, sans-serif;
            font-size: 2.5em;
            color: #ecf0f1;
            letter-spacing: 3px;
        }
 
        .time-segment {
            display: inline-block;
            min-width: 50px;
            text-align: center;
        }
 
        .colon {
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <div class=»clock-container»>
        <div id=»digital-clock»>
            <span class=»time-segment» id=»hours»>00</span>
            <span class=»colon»>:</span>
            <span class=»time-segment» id=»minutes»>00</span>
            <span class=»colon»>:</span>
            <span class=»time-segment» id=»seconds»>00</span>
        </div>
    </div>
 
    <script>
        function updateTime() {
            const now = new Date();
           
            const hours = now.getHours().toString().padStart(2, ‘0’);
            const minutes = now.getMinutes().toString().padStart(2, ‘0’);
            const seconds = now.getSeconds().toString().padStart(2, ‘0’);
 
            document.getElementById(‘hours’).textContent = hours;
            document.getElementById(‘minutes’).textContent = minutes;
            document.getElementById(‘seconds’).textContent = seconds;
        }
 
        // Обновляем время сразу при загрузке
        updateTime();
       
        // Обновляем время каждую секунду
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Инструкция: устанавливаем часы на сайт

Способ 1: Встраивание в существующую страницу

  • Откройте HTML-файл вашего сайта в текстовом редакторе
  • В раздел добавьте стили:
<style>
    .clock-container { … } /* Скопируйте стили из секции style */
</style>
  • В нужном месте страницы (где должны быть часы) добавьте:
<div class=»clock-container»>
    <div id=»digital-clock»>…</div>
</div>
  • Перед закрывающим тегом добавьте скрипт:
<script>
    // Скопируйте содержимое секции script
</script>

Способ 2: Отдельный файл

  • Создайте файл clock.css и вставьте стили из секции <style>
  • Создайте файл clock.js и вставьте содержимое секции <script>
  • В основном HTML-файле подключите:
<head>
    <link rel=»stylesheet» href=»clock.css»>
</head>
<body>
    <!— Вставьте div с часами —>
    <script src=»clock.js»></script>
</body>

Настройки внешнего вида

Чтобы изменить внешний вид часов на вашем сайте, необходимо будет внести соответствующие изменения в блок CSS. А именно:

  • Чтобы изменить размер часов

#digital-clock { font-size: 1.5em; } /* Меньший размер */

  • Смена цветовой схемы:

.clock-container { background: #your_color; }
#digital-clock { color: #your_color; }

  • Изменение шрифта:

#digital-clock { font-family: ‘Your Font’, sans-serif; }

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

Было интересно? поделись!
Tags:

Related Posts