Менять стиль в определенное время
Здравствуйте, помогите знающие программисты.
У меня есть часы для сайта, нужно чтобы в определенное время менялся фон. Фон в таблице со стилями. Нашел в инете код для смены картинки
<script type="text/javascript" language="Javascript">//<![CDATA[
document.write('<span id="Img"></span>')
day = new Date(); hour = day.getHours();
if (hour>=7 && hour<10) {document.getElementById("Img").innerHTML ='<img src="/clock/7-11.png" alt="" />'; }
else if (hour>=10 && hour<15)
{document.getElementById("Img").innerHTML ='<img src="/clock/11-15.png" alt="" />'; }
else if (hour>=15 && hour<18)
{document.getElementById("Img").innerHTML ='<img src="/clock/15-18.png" alt="" />'; }
else if (hour>=18 && hour<21)
{document.getElementById("greetingImg").innerHTML ='<img src="/clock/18-21.png" alt="" />'; } ;
//]]></script>
Но мне надо чтобы менялся стиль. "logo" <div class="logo"><div id='sprite-hours'><div id='sprite-minutes'><div id='sprite-seconds'></div></div></div></div></div> Как это правильно реализовать? |
например так
добавьте айди <div class="logo" id="logo"> меняйте класс
else if (hour>=10 && hour<15){
document.getElementById("logo").setAttribute("class", "имя нового класса");
}
|
animhotep, кто тебя такому научил? Надо писать так!
document.getElementById("logo").className = "имя нового класса";
|
Ребят попробовал оба варианта,
Вот второй
<html>
<head>
<script type='text/javascript' src='clock.js'></script>
<link rel="stylesheet" type="text/css" href="clock.css">
<script type="text/javascript" language="Javascript">
document.write('<div id="logo"></div>')
day = new Date(); hour = day.getHours();
if (hour>=7 && hour<10) {document.getElementById("logo") .className = "logo"; }
else if (hour>=10 && hour<15)
{document.getElementById("logo") .className = "logo1"; }
else if (hour>=15 && hour<18)
{document.getElementById("logo") .className = "logo2"; }
else if (hour>=18 && hour<21)
{document.getElementById("logo") .className = "logo3"; }
</script>
</head>
<body onload='ShowCurrentTime();'>
<div id="logo" class="logo"><div id='sprite-hours'><div id='sprite-minutes'><div id='sprite-seconds'></div></div></div></div>
</body>
</html>
Картинка со стилем вылезает выше часов, т.е смещает часы вниз. Что не так я делаю? |
Цитата:
|
Цитата:
|
Вот, хоть немного по-приличнее...
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.logo {
color: green;
}
.logo1 {
color: blue;
}
.logo2 {
color: red;
}
.logo3 {
color: silver;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="logo" class="logo">
<div id='sprite-hours'>
<div id='sprite-minutes'>
<div id='sprite-seconds'>logo</div>
</div>
</div>
</div>
<script type="text/javascript" language="Javascript">
var day = new Date();
var hour = day.getHours();
var o=document.getElementById("logo");
if (hour>=7 && hour<10) {
o.className = "logo";
} else if (hour<15) {
o.className = "logo1";
} else if (hour<18) {
o.className = "logo2";
} else if (hour<21) {
o.className = "logo3";
};
</script>
</body>
</html>
|
Цитата:
|
Ура!))) Спасибо всем большое) Особенно ksa) Всем плюсы)
|
Цитата:
else if (hour>=18 && hour<7) Так не выходит( |
| Часовой пояс GMT +3, время: 15:10. |