Смена иконки через каждых 6 часов через JS

Question

Здравствуйте формучане! Помогите реализовать смену иконки раз 6 часов через js скрипт.

Код HTML

<h4 class="f-w-600"><span id="greeting">Good Morning</span></h4>

В этом HTML коде мы получаем от id="greeting" время суток от js скрипта. Через каждых 6 часов идет смена приветствия: Доброй ночи, Добрые утро, Добрый день, Добрый вечер

Код JS

    var today = new Date()
var curHr = today.getHours()

if (curHr >= 0 && curHr < 4) {
    document.getElementById("greeting").innerHTML = 'Доброй ночи';
} else if (curHr >= 4 && curHr < 12) {
    document.getElementById("greeting").innerHTML = 'Доброе утро';
} else if (curHr >= 12 && curHr < 16) {
    document.getElementById("greeting").innerHTML = 'Добрый день';
} else {
    document.getElementById("greeting").innerHTML = 'Добрый вечер';
}

В JS коде идет сама смена времени и вместе с ним идет смена слов например: 'Доброй ночи' как добавить так чтобы можно было сменить и иконку в месте со словом?

Пробивал вот: document.getElementById("greeting").innerHTML = 'Доброй ночи <span class="right-circle setting-bg-primary">'; так не получилось.

Answer 1

var today = new Date()
var curHr = today.getHours()
var icon = document.createElement('span');
var greeting = document.getElementById("greeting");

if (curHr >= 0 && curHr < 4) {
    greeting.innerHTML = 'Доброй ночи';
    icon.classList.add('fa','fa-star')
} else if (curHr >= 4 && curHr < 12) {
    greeting.innerHTML = 'Доброе утро';
    icon.classList.add('fa','fa-sun-o')
} else if (curHr >= 12 && curHr < 16) {
    greeting.innerHTML = "Добрый день ";
    icon.classList.add('fa','fa-sun-o')
} else {
    greeting.innerHTML = 'Добрый вечер';
    icon.classList.add('fa','fa-moon-o')
}
greeting.append(icon);

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4 class="f-w-600"><span id="greeting">Good Morning</span></h4>

Answer 2

твой проект можно сделать вот так: HTML:

    <i class="fa fa-spinner" id="icon"></i>

JavaScript:

    let icon1 = "fa fa-history";
    let icon2 = "fa fa-android";
    let icon3 = "fa fa-file";
    setInterval(function () {
      setTimeout(function () {
        document.querySelector("#icon"). className = icon1;
      }, 21600000);
      setTimeout(function () {
        document.querySelector("#icon"). className = icon2;
      }, 43200000);
      document.querySelector("#icon"). className = icon3;
      }, 64800000);
    }, 21600000);

БЛОГ НА HUSL

Смена иконки через каждых 6 часов через JS

Ответы (2 шт):