Форум

Блондинка · #1 (**permalink**) 08.05.2021, 12:41

не подскажете как в этом скрипте

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#holiday {
    background: hsl(0,0%,90%);
    color: hsl(340,100%,50%);
    font: bold 24px/20px serif;
    text-align: center;
    padding: 15px 0;
    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="hollyday">
    </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( "9 May 2021 23:59:59: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>

сделать чтобы блок просто менял значения свойства display, c none на block ?

рони · #2 (**permalink**) 08.05.2021, 14:02

Блондинка,
просто комментарий ... вроде по русски пишет, а что хочет, пойди догадайся ...

Блондинка · #3 (**permalink**) 08.05.2021, 15:24

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#holiday {
    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>

рони · #4 (**permalink**) 08.05.2021, 16:34

Блондинка,
в строке 7 добавить none, в строке 66 block

Блондинка · #5 (**permalink**) 08.05.2021, 16:59

Сообщение от Блондинка

рони,
смотри, тут на странице виден пустой блок, без текста, а как сделать чтобы блок пропал, присвоив ему 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-коде?

рони · #6 (**permalink**) 08.05.2021, 17:40

Блондинка,

if(d.getHours()>=m.start) {
        var b = document.getElementById("holiday");
        if (!b) {
        b = document.createElement("div");
        b.id = "holiday";
        document.querySelector("body").appendChild(b);
         }
        b.innerHTML = m.compliments;
        b.style.display = "block";
    }

Блондинка · #7 (**permalink**) 08.05.2021, 18:02

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin: 0; padding: 0; }
#holiday {
    display: none; 
    background: hsl(0,0%,90%);
    color: hsl(340,100%,50%);
    font: bold 24px/20px serif;
    text-align: center;
    margin: 0;
    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( "9 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";
    document.querySelector("body").appendChild(b);
    }
    b.innerHTML = m.compliments;
    b.style.display = "block";
    }  
}
</script>
</body>
</html>

вставила, и пустой див остался на странице...

рони · #8 (**permalink**) 08.05.2021, 18:07

Сообщение от Блондинка

пустой див остался на странице...

а куда пропала строка с none?

Блондинка · #9 (**permalink**) 08.05.2021, 18:15

sorry, сейчас пропадает...

Блондинка · #10 (**permalink**) 08.05.2021, 18:35

рони,
а возможно ли в этом скрипте сделать так, чтобы к примеру в 28 строке можно было указать только текст/картинку поздравления? чтобы работало без всяких start и duration, чтобы строка была такой

{'compliments': 'С новым годом !'}

?

и только в отдельных случаях можно было добавлять эти параметры?

а в идеале, чтобы в особых случаях можно было добавить нужные параметры,
или start и stop (если надо показать див в течении одних суток, но изменить начало с (00:00:00) и окончание показа с (23:59:59) на другие значения

или start и duration если надо показывать див в течении нескольких суток..

и возможно ли чтобы и start и stop и duration могло принимать значения не только часы, а часы, минуты, секунды... другими словами чтобы можно было установить значения этих параметров с точностью до секунд...???

Форум

Справочник

Discord чат

Курсы javascript