
Markup
<h1>
<span class="greeting"></span>
<span class="greeting-2"></span>
</h1>
In these two spans, we will have the necessary information. We look. (don’t forget to include jQuery).
JS (jQuery)
let day = new Date();
let hour = day.getHours();
if (hour>=5 && hour<12) {
$('h1 .greeting').text('Доброе');
$('h1.greeting-2').text('утро');
} else if (hour>=0 && hour<5) {
$('h1 .greeting').text('Доброй');
$('h1 .greeting-2').text('ночи');
} else if (hour>=12 && hour<18) {
$('h1 .greeting').text('Добрый');
$('h1 .greeting-2').text('день');
} else if (hour>=18 && hour<24) {
$('h1 .greeting').text('Добрый');
$('h1 .greeting-2').text('вечер');
}
variable day
stores the date after getHours
we get the time of our system (that is, it will work everywhere, regardless of the time zone). And then we just make different conditions. Can be done through switch
if you know how) It’s that simple) simple and works. Just in case, I will attach for you codepento make it more convenient.
Thank you all for being with me, successful application!