Замена стиля при определенном времени
Доброе утро!
Такая проблемка, есть несколько элементов, примерно таких:
<div class="lok <?php
$vrsh = date("G");
if ($vrsh >= 6 & $vrsh < 9)
{
echo "morning";
}
elseif ($vrsh >= 9 & $vrsh < 18)
{
echo "day";
}
elseif($vrsh >= 18 & $vrsh < 21)
{
echo "evening";
}
else
{
echo "night";
}
?>"></div>
И еще в 2-ух местах. Смена шапки (фона. шапки и флешки). И не совсем правильно работает.Хотелось бы примерно такое же решить в javascript. |
Ну вообще-то такое обычно и решается на js так как у клиента своё время.
А в чём собственно проблема то? Тут практически всё идентично. |
Цитата:
Если я правильно понял, то, скрипт в отдельный файл, "прикрепить" к страницам. А как его вызывать в коде (вставка в нескольких местах) не знаю :-? |
НАПОДОБИЕ ТАКОГО
<div></div>
<script>
elem=document.getElementsByTagName('div')[0]
date=new Date()
hours=date.getHours()
if(hours>6&&hours<9){
elem.innerHTML='УТРО'
}
else{
if(hours>=9&&hours<17){
elem.innerHTML='ДЕНЬ'
}
else{
elem.innerHTML='Вечер или ночь'
}
}
|
bot87,
3 раза указать стрипт на странице = лишний вес. Нету ли в js вывода наподоби как я указал выше? в трех местах. Цитата:
Мне просто нужно вставить в код, а именно типа <div class="np {нужный вывод}">... |
ну да, можно класснейм, можно id. как вам угодно будет =)
и трижды вычислять значение не нужно |
Цитата:
elem=document.getElemen*!*t*/!*By*!*Id*/!*('yourid');
|
А как вывод сделать типа:
<div id="myid" class="[вывод скрипта]"></div> :help: |
я может не совсем понимаю что нужно, но почему бы не создать класс, написать необходимые методы и обращаться к методам через объект класса там где это надо
|
Sergey66628,
Что? Какой класс? Во-первых, в js нет классов. А во-вторых, зачем тут вообще дополнительные объекты? |
Sergey66628,
что?? o_O Цитата:
|
Цитата:
|
А что скрипт должен делать?
|
Цитата:
Код:
Если сейчас утро, то класс у дива - morning; |
Цитата:
вместо elem.innerHTML='УТРО' надо elem.className='utro'; итд; |
Цитата:
<html>
<head>
<script>
elem=document.getElementById('flash');
date=new Date()
hours=date.getHours()
if(hours>6&&hours<9){
elem.className='morning'
}
else{
if(hours>=9&&hours<17){
elem.className='day'
}
else{
if(hours>=18&hours<21){
elem.className='evering'
}
else{
elem.className='night'
}
}
}
</script>
<style>
.day {color:red;}
</style>
</head>
<body style="background:white;">
---
НАПОДОБИЕ ТАКОГО
<div id='flash'>sdddd</div>
<div style="color:red;">ыыыыы</div>
</body>
</html>
Не работает? Или я что-то не так делаю? P.S. Добавлено: Через ИЕ показывает: SCRIPT5007: Не удалось задать значение свойства "className": значением объекта является NULL или он не определен in.html, строка 13 символ 2 |
<html>
<head> <script> function tim(){ var elem=document.getElementById('flash'); var date=new Date() var hours=date.getSeconds() if(hours>6&&hours<19){ elem.className='morning' } else if(hours>=19&&hours<37){ elem.className='day' } else if(hours>=38&hours<48){ elem.className='evering' } else{ elem.className='night' } }; window.onload=function(){setInterval(tim,1000)} </script> <style> .morning {color:green;} .day {color:red;} .evering {color:blue;} .night {color:black;} </style> </head> <body style="background:white;"> <div id='flash'>color</div> <div style="color:red;">tratata</div> </body> </html> |
Цитата:
Тобишь класс меняется всё это время... А мне нужно, что бы определилось какое сейчас время (лучше по серверному), и поставился клас взависимости от этого. |
ну я сделал что меняется для секунд чтобы было видно
вместо var hours=date.getSeconds() снова поставьте var hours=date.getHours() и цифры я там заменил верните прежние при сравнении типа if(hours>=19&&hours<37) и увеличьте интервал setInterval(tim,1000*30*60) ----------- серверного времени на клиенте нет да и лучше клиентское иметь ведь когда в Москве ночь в Вашингтоне утро ну и тестировать сутки придется |
Цитата:
<html>
<head>
<script>
function tim(){
var elem=document.getElementById('flash');
var date=new Date()
var hours=date.getHours()
if(hours>6&&hours<9){
elem.className='morning'
}
else
if(hours>=9&&hours<18){
elem.className='day'
}
else
if(hours>=18&&hours<21){
elem.className='evering'
}
else{
elem.className='night'
}
};
window.onload=function(){setInterval(tim,1000*30*60)}
</script>
<style>
.morning {color:green;}
.day {color:red;}
.evering {color:blue;}
.night {color:black;}
</style>
</head>
<body style="background:white;">
<div id='flash'>color</div>
<div style="color:red;">tratata</div>
</body>
</html>
Проверял. Сегодня по часам у меня в 9.02, цвет - черный. По часам в 8.40 - тоже черный. Оставил страницу в 9.02, сейчас, в 9.40 поменялся на красный (день). Но при обновлении снова черный :( |
Цитата:
|
Цитата:
|
Цитата:
window.onload=function(){tim();setInterval(tim,100 0)} интересно почему редактор пробел делает пишу тысячу а он пишет 100 0 |
вся отрисовка действий скрипта находится в объекте настроек.
<style>
.morning { color: #BADA55 }
.day { color: lime }
.night { color: yellow }
.evening { color: #757575 }
</style>
<div class="changeable"> я меняю цвет! это как ёлка, только я как div </div>
<span class="changeable">и я тоже :)</span>
<script>
// настройки
window['depended class options'] = {
'onchange': function(time, lastTime){ // тут отображаем класс на указанных элементах
Array. // всем
prototype. // элементам
forEach. // с классом, имеющим "changeable"
call(document.querySelectorAll("*[class*=changeable]"),
function(element){
element.classList.add(time); // добавить в класс текущее время
if(lastTime){ // и, если есть старое (при запуске старого нет)
element.classList.remove(lastTime); // удалить его.
}
});
},
'interval': 1e4*60 // интервал проверки - 10 минут
};
(function(d){function e(){var e=f;a:{var b,g=(new Date).getHours(),a;for(b in c)if("string"===typeof c[b]&&(a=b.split("-"),c[b]=[+a[0],+a[1],c[b]]),a=c[b],g>=a[0]&&g<a[1]){f=a[2];break a}f=void 0}d.onchange&&d.onchange.call(void 0,f,e)}var f,c={"6-12":"morning","12-18":"day","18-24":"evening","0-25":"night"};e();d.id=setInterval(e,d.interval)})(window["depended class options"]);
</script>
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:20. |