@gubaalex

Как сделать смену стилей CSS в зависимости от времени суток с помощью JS?

<!DOCTYPE html>
<html lang='ru'>
<head>
    <meta charset="UTF-8">
    <title>Сырники.Как приготовить сырники?</title>
    <meta name="description" content="" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;500;900&display=swap" rel="stylesheet">
    <script src="js.js"></script>
<head>
<body>
    
<div class="wrapper">


function styletime() {
var time = new Date();
var hour = time.getHours();
if(hour > 22 & hour <= 6) { parent.setstyle('day.css');  }
if(hour > 6 & hour <= 11) { parent.setstyle('day.css');  }
if(hour > 11 & hour <= 16) { parent.setstyle('night.css'); }
if(hour > 16 & hour <= 22) { parent.setstyle('night.css'); }
}


Дело в том что мой скрипт не работает, от слово не работает он взял максимально. Как написать скрипт на js для смены стилей CSS, чтобы смена происходила 1 раз? То есть например до 19:00 у меня стоит светлые стили CSS определённый файл, а после 19:00 у меня стоит темные стили соответственно другой файл.
  • Вопрос задан
  • 744 просмотра
Решения вопроса 4
@twoone
Если сайт является spa то будет необходимо реализовать постоянную проверку времени и изменение темы путем вызова метода changeTheme.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link id="time-theme" rel="stylesheet" href="">
    <script src="./time-theme.js"></script>
</head>
<body>
    
</body>
</html>

let timeRanges = new Set([
    {range: {from: `24`, to: `4`}, name:`night`, href:`./dark-theme.css`},
    {range: {from: `4`, to: `12`}, name: `morning`, href:`./light-theme.css`},
    {range: {from: `12`, to: `17`}, name: `day`, href:`./light-theme.css`},
    {range: {from: `17`, to: `24`}, name: `evening`, href:`./dark-theme.css`},
]);

const changeTheme = timeRanges => {
    let currentHour = new Date().getHours();

    for(let {range, href, name} of timeRanges){
        if(currentHour >= range.from && currentHour <= range.to){
            Object.assign(document.querySelector(`link#time-theme`), { href });
    
            break;
        }
        
    }
}

changeTheme(timeRanges);
Ответ написан
@granty
Менять CSS сайта по времени суток не имеет никакой практической пользы, эта устаревшая мулька использовалась 12 лет назад.
Сейчас можно делать смену CSS по датчику внешнего освещения смартфона (Ambient light sensor), чтобы при низкой освещённости давать более светлый дизайн (или, наоборот, более тёмный, чтобы не слепил глаза).

Но если так хочется менять CSS по времени суток - этот запрос в Яндексе полностью даст ответ на ваш вопрос.
Ответ написан
dimovich85
@dimovich85 Куратор тега JavaScript
Уроки по JS - https://t.me/school_ofpery
Почему бы в стилях не написать вот как-то так:
body.day-style h1{....}..... Привязать Ваши стили к классу у тега body?
Потом просто в js поработать с Date, по условиям просто тегу body навешать других классов в зависимости от времени суток?
Ответ написан
wapster92
@wapster92 Куратор тега JavaScript
Оплакиваю свой старенький ПК..
Во первых не &, а &&. Во вторых нужно пользоваться поиском Запуск скрипта в определенное время? два примера, простой и с часовым поясом. И в js нужно привязываться к определенному событию, чтобы функция заработала или использовать setInterval, что-бы узнавать текущее время. Если хочешь менять целые файлы то нужно искать элемент link и менять его значение href.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы