ВРЕМЯ/ЧАСЫ

Показывает текущее время и день недели на странице
目前為 2025-03-11 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name                ВРЕМЯ/ЧАСЫ
// @name:ru             ВРЕМЯ/ЧАСЫ
// @name:en             TIME/HOURS
// @namespace           DelfionScripts
// @match               *://*/*
// @grant               none
// @version             2.1
// @author              DELFION
// @copyright           Copyright  DELFION
// @license             MIT
// @inject-into         auto
// @run-at              document-end
// @description:ru      Показывает текущее время и день недели на странице
// @description:en      Shows the current time and day of the week on the page
// @description         Показывает текущее время и день недели на странице
// @icon                https://cdn-icons-png.flaticon.com/128/13814/13814367.png
// ==/UserScript==

(() => {
  "use strict";

  // Функция создаёт элемент для отображения времени
  const createTimeDisplay = () => {
    const timeElement = document.createElement("div");
    timeElement.classList.add("time-display");

    // Создаём элементы для отображения часов, минут и дня недели
    const hoursSpan = document.createElement("span");
    const minutesSpan = document.createElement("span");
    const dayOfWeekSpan = document.createElement("span");

    // Добавляем элементы в контейнер с разделителями ":" и ", "
    timeElement.append(hoursSpan, ":", minutesSpan, ", ", dayOfWeekSpan);

    // Создаём стили и добавляем их в head документа
    const style = createStyle();
    document.head.appendChild(style);

    return {
      element: timeElement,
      hours: hoursSpan,
      minutes: minutesSpan,
      dayOfWeek: dayOfWeekSpan,
    };
  };

  // Функция создаёт и возвращает стили для отображения времени
  const createStyle = () => {
    const style = document.createElement("style");
    style.textContent = `
      .time-display {
        position: fixed; /* Фиксированное положение на экране (не прокручивается) */
        bottom: 10px; /* Отступ от нижнего края экрана */
        left: 177px; /* Отступ от левого края экрана */
        padding: 8px; /* Внутренний отступ (пространство вокруг текста) */
        font-size: 24px; /* Размер шрифта */
        font-weight: bold; /* Жирный шрифт */
        z-index: 1000; /* Приоритет слоя (чтобы не перекрывался другими элементами) */
        color: black; /* Основной цвет текста */
        text-shadow: 1px 1px 2px white; /* Тень текста для лучшей читаемости */
        background: rgba(255, 255, 255, 0.4); /* Полупрозрачный белый фон */
        border-radius: 5px; /* Скруглённые углы блока */
      }

      .time-display span {
        transition: color 1s ease; /* Плавная смена цвета текста в течение 1 секунды */
      }
    `;
    return style;
  };

  // Функция обновляет отображаемое время
  const updateDisplayTime = (display) => {
    const now = new Date();

    // Получаем текущие часы и минуты, дополняем нулями до двух знаков
    const hours = now.getHours().toString().padStart(2, "0");
    const minutes = now.getMinutes().toString().padStart(2, "0");

    // Получаем день недели в коротком формате (например, "пн", "вт")
    const dayOfWeek = new Intl.DateTimeFormat("ru-RU", { weekday: "short" }).format(now);

    // Генерируем случайный цвет
    const color = getRandomColor();

    // Обновляем текстовое содержимое элементов
    display.hours.textContent = hours;
    display.minutes.textContent = minutes;
    display.dayOfWeek.textContent = dayOfWeek;

    // Меняем цвет текста
    display.hours.style.color = color;
    display.minutes.style.color = color;
  };

  // Функция генерирует случайный цвет с ограниченной яркостью
  const getRandomColor = () => {
    const r = Math.floor(Math.random() * 100);
    const g = Math.floor(Math.random() * 150);
    const b = Math.floor(Math.random() * 200);
    return `rgb(${r}, ${g}, ${b})`;
  };

  // Основная функция инициализации
  const init = () => {
  if (!document.body) {
    document.addEventListener("DOMContentLoaded", init);
    return;
  }
  const display = createTimeDisplay();
  document.body.appendChild(display.element);
  updateDisplayTime(display);
  setInterval(() => updateDisplayTime(display), 3000);
};

init(); // Запускаем скрипт
})();
欢迎访问Greasy Fork镜像
