@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 у меня стоит темные стили соответственно другой файл.
  • Вопрос задан
  • 1651 просмотр
Решения вопроса 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
https://u-academy.net/
Почему бы в стилях не написать вот как-то так:
body.day-style h1{....}..... Привязать Ваши стили к классу у тега body?
Потом просто в js поработать с Date, по условиям просто тегу body навешать других классов в зависимости от времени суток?
Ответ написан
wapster92
@wapster92 Куратор тега JavaScript
Во первых не &, а &&. Во вторых нужно пользоваться поиском Запуск скрипта в определенное время? два примера, простой и с часовым поясом. И в js нужно привязываться к определенному событию, чтобы функция заработала или использовать setInterval, что-бы узнавать текущее время. Если хочешь менять целые файлы то нужно искать элемент link и менять его значение href.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект
22 нояб. 2024, в 23:55
3000 руб./за проект