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.
|
|
08.05.2021, 14:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Блондинка,
просто комментарий ... вроде по русски пишет, а что хочет, пойди догадайся ...
|
|
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>
|
|
08.05.2021, 16:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Блондинка,
в строке 7 добавить none, в строке 66 block
|
|
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.
|
|
08.05.2021, 17:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Блондинка,
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";
}
|
|
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.
|
|
08.05.2021, 18:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Сообщение от Блондинка
|
пустой див остался на странице...
|
а куда пропала строка с none?
|
|
08.05.2021, 18:15
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
sorry, сейчас пропадает...
|
|
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 могло принимать значения не только часы, а часы, минуты, секунды... другими словами чтобы можно было установить значения этих параметров с точностью до секунд...???
|
|
|
|