Javascript.RU

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

как изменить значение свойства стилей?
не подскажете как в этом скрипте
<!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 ?

Последний раз редактировалось Блондинка, 08.05.2021 в 13:26.
Ответить с цитированием
  #2 (permalink)  
Старый 08.05.2021, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Блондинка,
просто комментарий ... вроде по русски пишет, а что хочет, пойди догадайся ...
Ответить с цитированием
  #3 (permalink)  
Старый 08.05.2021, 15:24
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

рони,
смотри, тут на странице виден пустой блок, без текста, а как сделать чтобы блок пропал, присвоив ему 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Блондинка,
в строке 7 добавить none, в строке 66 block
Ответить с цитированием
  #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.
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2021, 17:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Блондинка,
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
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

<!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>


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

Последний раз редактировалось Блондинка, 09.05.2021 в 22:34.
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2021, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Блондинка
пустой див остался на странице...
а куда пропала строка с none?
Ответить с цитированием
  #9 (permalink)  
Старый 08.05.2021, 18:15
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

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

рони,
а возможно ли в этом скрипте сделать так, чтобы к примеру в 28 строке можно было указать только текст/картинку поздравления? чтобы работало без всяких start и duration, чтобы строка была такой
{'compliments': 'С новым годом !'}
?

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как значение инпута вставить в значение свойства объекта Искорка Events/DOM/Window 3 20.08.2019 12:29
Как с помощью javascript изменить свойства css iropov Javascript под браузер 10 05.08.2019 01:41
Как передать значение в функцию в переменную с нужным именем? bratkovsky Общие вопросы Javascript 1 12.10.2015 08:18
как изменить свойства плагина platedz jQuery 0 29.09.2015 19:12
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42