Показать сообщение отдельно
  #5 (permalink)  
Старый 08.05.2021, 16:59
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Сообщение от Блондинка Посмотреть сообщение
рони,
смотри, тут на странице виден пустой блок, без текста, а как сделать чтобы блок пропал, присвоив ему display: none; а когда будет праздник блоку надо присвоить display: block

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#holiday {
    display: none;
    background: hsl(0,0%,90%);
    color: hsl(340,100%,50%);
    font: bold 24px/20px serif;
    text-align: center;
    padding: 15px 20px;
    border: 1px solid hsl(0,0%,50%);
    border-radius: 12px/9px;
}
</style>
</head>
<body>
    <div id="header">
    <div id="logo"></div>
    <div id="block_time-data"></div>
    </div>
    <div id="holiday">
    </div>
<script type="text/javascript">
var holidays = {
    '1': {
        '1': {'start': 0, 'duration': 24, 'compliments': 'С новым годом !'},
        '7': {'start': 0, 'duration': 24, 'compliments': 'С рождеством !'} },
    '2': {
        '23': {'start': 0, 'duration': 24, 'compliments': 'С 23 февраля !'} },
    '3': {
        '8': {'start': 0, 'duration': 12, 'compliments': 'С 8 марта !'} },
    '4': {
        '12': {'start': 0, 'duration': 12, 'compliments': 'С днём космонавтики !'} },
    '5': {
        '1': {'start': 0, 'duration': 12, 'compliments': 'С 1 мая !'},
        '9': {'start': 0, 'duration': 24, 'compliments': 'С 9 мая !'} },
    '6': {
        '1': {'start': 0, 'duration': 24, 'compliments': 'С 1 июня, Всемирным днём родителей !'} },
    '7': {
        '3': {'start': 0, 'duration': 24, 'compliments': '3 июля, день независимости Республики Беларусь !'} },
    '8': {
        '12': {'start': 0, 'duration': 24, 'compliments': '12 августа международный день молодёжи !'} },
    '9': {
        '1': {'start': 0, 'duration': 24, 'compliments': '1 сентября, день знаний !'} },
    '10': {
        '1': {'start': 0, 'duration': 24, 'compliments': '1 октября, международный день пожилых людей !'} },
    '11': {
        '7': {'start': 0, 'duration': 24, 'compliments': '7 ноября, день октябрьской революции !'} },
    '12': {
        '25': {'start': 0, 'duration': 24, 'compliments': 'С католическим рождеством !'} }
}, d = new Date( "2 May 2021 00:00:00:001" ), m;

if((m = holidays[d.getMonth()+1]) && m[d.getDate()]) {
    //можно записывать в сессионное хранилище условие (метку окончания показа)
    //и проверяя ее в ней, если она есть, сразу отображаем поздравление и запускаем таймер окончания
    //в противном случае запускаем таймер сканирующий время на соответствие началу старта поздравления
    //и при этом событии пишем метку окончания в сессию
    //конечное сравнение для старта, это
    m = m[d.getDate()];
    if(d.getHours()>=m.start) {
        var b = document.getElementById("holiday");
        if (!b) { b = document.createElement("div");
        b.id = "holiday"; }
        b.innerHTML = m.compliments; document.querySelector("body").appendChild(b);
    }  
}
        </script>
</body>
</html>
а с 66 строкой, можно чуть подробнее? куда именно вставлять?

и причём тут
document.querySelector("body").appendChild(b);
если блок с поздравлением уже установлен в html-коде?

Последний раз редактировалось Блондинка, 08.05.2021 в 17:13.
Ответить с цитированием