как изменить значение свойства стилей?
не подскажете как в этом скрипте
<!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 ? |
Блондинка,
просто комментарий ... вроде по русски пишет, а что хочет, пойди догадайся ... |
рони,
смотри, тут на странице виден пустой блок, без текста, а как сделать чтобы блок пропал, присвоив ему 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> |
Блондинка,
в строке 7 добавить none, в строке 66 block |
Цитата:
и причём тут document.querySelector("body").appendChild(b);если блок с поздравлением уже установлен в html-коде? |
Блондинка,
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"; } |
<!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> вставила, и пустой див остался на странице... |
Цитата:
|
sorry, сейчас пропадает...
|
рони,
а возможно ли в этом скрипте сделать так, чтобы к примеру в 28 строке можно было указать только текст/картинку поздравления? чтобы работало без всяких start и duration, чтобы строка была такой {'compliments': 'С новым годом !'}? и только в отдельных случаях можно было добавлять эти параметры? а в идеале, чтобы в особых случаях можно было добавить нужные параметры, или start и stop (если надо показать див в течении одних суток, но изменить начало с (00:00:00) и окончание показа с (23:59:59) на другие значения или start и duration если надо показывать див в течении нескольких суток.. и возможно ли чтобы и start и stop и duration могло принимать значения не только часы, а часы, минуты, секунды... другими словами чтобы можно было установить значения этих параметров с точностью до секунд...??? |
Цитата:
|
Цитата:
|
рони,
у меня есть похожий скрипт <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <body> <style> #hollyday { 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> <div id="header"> <div id="logo"></div> <div id="block_time-data"></div> <div id="hollyday"> </div> </div> <script> var fixDates = [ { month: 1, day: 1, hour: 0, duration: 24, compliments: "С новым годом !" }, { month: 1, day: 7, hour: 0, duration: 24, compliments: "С православным рождеством !" }, { month: 2, day: 23, hour: 0, duration: 24, compliments: "С 23 февраля !" }, { month: 3, day: 8, hour: 0, duration: 24, compliments: "С 8 марта !" }, { month: 4, day: 12, hour: 0, duration: 24, compliments: "12 апреля, день космонавтики !" }, { month: 5, day: 1, hour: 0, duration: 24, compliments: "С 1 мая !" }, { month: 5, day: 9, hour: 0, duration: 24, compliments: "С 9 мая !" }, { month: 6, day: 1, hour: 0, duration: 24, compliments: "С 1 июня, Всемирным днём родителей !" }, { month: 7, day: 3, hour: 0, duration: 24, compliments: "3 июля, день независимости Республики Беларусь !" }, { month: 8, day: 12, hour: 0, duration: 24, compliments: "12 августа международный день молодёжи !" }, { month: 9, day: 1, hour: 0, duration: 24, compliments: "1 сентября, день знаний !" }, { month: 10, day: 1, hour: 0, duration: 24, compliments: "1 октября, международный день пожилых людей !" }, { month: 11, day: 7, hour: 0, duration: 24, compliments: "7 ноября, день октябрьской революции !" }, { month: 12, day: 25, hour: 0, duration: 24, compliments: "С католическим рождеством !" } ]; function catholicDate(year) { var a = year % 19; var b = year % 4; var c = year % 7; var k = Math.floor(year / 100); var p = Math.floor((13 + 8 * k) / 25); var q = Math.floor(k / 4); var m = (15 - p + k - q) % 30; var n = (4 + k - q) % 7; var d = (19 * a + m) % 30; var e = (2 * b + 4 * c + 6 * d + n) % 7; if (d === 29 && e === 6) return new Date(year, 3, 19); if (d === 28 && e === 6 && ((11 * m + 11) % 30 < 19)) return new Date(year, 3, 18); if (d + e > 9) return new Date(year, 3, d + e - 9); else return new Date(year, 2, 22 + d + e); } function orthodoxDate(year) { var a = year % 19; var b = year % 4; var c = year % 7; var d = (19 * a + 15) % 30; var e = (2 * b + 4 * c + 6 * d + 6) % 7; var f = d + e; return f <= 26 ? new Date(year, 3, 4 + f) : new Date(year, 4, f - 26); } function getActualCompliments() { var now = new Date( "2 May 2021 00:00:00:001" ); // кат.пасха "4 April 2021 00:00:00:000", прав.пасха "2 May 2021 00:00:00:000", радуница "11 May 2021 00:00:00:000", троица "20 June 2021 00:00:00:000" var result = fixDates.filter(v => { var currentDate = new Date(now.getFullYear(), v.month - 1, v.day, v.hour); var durms = v.duration * 3600000; console.log(now, currentDate, (now - currentDate) / 3600000); var rg = now - currentDate; return rg <= durms && rg >= 0; }).map(v => v.compliments); var caholic = catholicDate(now.getFullYear()); var ortodox = orthodoxDate(now.getFullYear()); if (caholic.getMonth() == now.getMonth() && caholic.getDate() == now.getDate()) result.push("С католической пасхой!"); if (ortodox.getMonth() == now.getMonth() && ortodox.getDate() == now.getDate()) result.push("С православной пасхой!"); var radunitsa = new Date(ortodox); radunitsa.setDate(radunitsa.getDate() + 9); if (radunitsa.getMonth() == now.getMonth() && radunitsa.getDate() == now.getDate()) result.push("С радуницей !"); var trinity = new Date(ortodox); trinity.setDate(trinity.getDate() + 49); if (trinity.getMonth() == now.getMonth() && trinity.getDate() == now.getDate()) result.push("С троицей!"); return result; } var actualCompliments = getActualCompliments(); console.log(actualCompliments); if (actualCompliments.length > 0) { var hollyday = document.getElementById("hollyday"); hollyday.style.display = "block"; for (var c of actualCompliments) { var div = document.createElement("div"); hollyday.appendChild(div); div.innerHTML = c; } } function foo(month, day, compliment, hour = 0) { return { month: month, day: day, hour: hour, compliment: compliment } } var now9 = new Date(); now9.setDate(now9.getDate() + 9); console.log(now9); var now49 = new Date(); now49.setDate(now49.getDate() + 49); console.log(now49); </script> </body> </html> если бы я могла список фиксированных дат, привести к такому виду... var fixDates = { '1': { '1': {'compliments': 'С новым годом !'}, '7': {'compliments': 'С рождеством !'} }, '2': { '23': {'compliments': 'С 23 февраля !'} }, '3': { '8': {'compliments': 'С 8 марта !'} }, '4': { '12': {'compliments': 'С днём космонавтики !'} }, '5': { '1': {'compliments': 'С 1 мая !'}, '9': {'compliments': 'С 9 мая !'} }, '6': { '1': {'compliments': 'С 1 июня, Всемирным днём родителей !'} }, '7': { '3': {'compliments': '3 июля, день независимости Республики Беларусь !'} }, '8': { '12': {'compliments': '12 августа международный день молодёжи !'} }, '9': { '1': {'compliments': '1 сентября, день знаний !'} }, '10': { '1': {'compliments': '1 октября, международный день пожилых людей !'} }, '11': { '7': {'compliments': '7 ноября, день октябрьской революции !'} }, '12': { '25': {'compliments': 'С католическим рождеством !'} } }и сделать как говорила выше... |
Цитата:
|
народ, помогите кто может довести до толка скрипт, желательно из 13 поста, сама я просто не в состоянии это сделать...
|
Блондинка,
а некому помочь, кто мог уже помог... |
рони,
помоги хотя-бы в скрипте из 13 поста, привести список фиксированных дат к нужному виду, разбить сначала по месяцам, а потом в каждом месяце по датам... |
Цитата:
|
рони,
тогда попробую по порядку, откуда тут у блока взялись поля слева и справа ? почему блок не растягивается на всю ширину? ведь у блока не указан margin, и у страницы (body) не указан padding ... |
Цитата:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/reseter.css/1.1.2/reseter.min.css'> |
Блондинка,
читать https://habr.com/ru/post/45296/ |
рони,
второй вопрос, можешь помочь сделать так, чтобы к примеру в 28 строке можно было указать только текст/картинку поздравления? чтобы работало без всяких start и duration, чтобы строка была такой {'compliments': 'С новым годом !'}? и только в отдельных случаях можно было добавлять эти параметры? а в идеале, чтобы в особых случаях можно было добавить нужные параметры, или start и stop (если надо показать див в течении одних суток, но изменить начало с (00:00:00) и окончание показа с (23:59:59) на другие значения или start и duration если надо показывать див в течении нескольких суток.. и возможно ли чтобы и start и stop и duration могло принимать значения не только часы, а часы, минуты, секунды... другими словами чтобы можно было установить значения этих параметров с точностью до секунд...??? |
Цитата:
|
рони, почему?
если я попытаюсь объяснить по другому, есть список дат, надо чтобы скрипт сверял текущий момент с этим списком, и случае совпадения показывал блок с поздравлением, с точностью до месяца и числа, так возможно сделать? и только в отдельных случаях чтобы можно менять точность до часов минут секунд, а в других отдельных случаях чтобы можно было указать момент времени с точностью до часов минут секунд и установить таймер продолжительности показа блока в часах минутах секундах, так возможно? |
Цитата:
|
Часовой пояс GMT +3, время: 19:58. |