Форум

Timmermans · #1 (**permalink**) 05.03.2014, 12:15

Здравствуйте, помогите знающие программисты.

У меня есть часы для сайта, нужно чтобы в определенное время менялся фон. Фон в таблице со стилями.

Нашел в инете код для смены картинки

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

Как это правильно реализовать?

animhotep · #2 (**permalink**) 05.03.2014, 13:23

например так
добавьте айди <div class="logo" id="logo">
меняйте класс

else if (hour>=10 && hour<15){
  document.getElementById("logo").setAttribute("class", "имя нового класса");
}

danik.js · #3 (**permalink**) 05.03.2014, 13:55

animhotep, кто тебя такому научил? Надо писать так!

document.getElementById("logo").className = "имя нового класса";

Timmermans · #4 (**permalink**) 05.03.2014, 13:59

Ребят попробовал оба варианта,

Вот второй

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

Картинка со стилем вылезает выше часов, т.е смещает часы вниз.
Что не так я делаю?

ksa · #5 (**permalink**) 05.03.2014, 14:03

Сообщение от Timmermans

Что не так я делаю?

Ты пока не понимаешь принципа построения ДОМ-модели...

Timmermans · #6 (**permalink**) 05.03.2014, 14:10

Сообщение от ksa

Ты пока не понимаешь принципа построения ДОМ-модели...

Я скажу что я практически ничего не знаю в js

Поэтому у вас прошу о помощи.

ksa · #7 (**permalink**) 05.03.2014, 14:10

Вот, хоть немного по-приличнее...

<!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 · #8 (**permalink**) 05.03.2014, 14:11

Сообщение от Timmermans

Я скажу что я практически ничего не знаю в js

Тогда вообще не понятно, на что ты расчитывал, берясь за эту работу?

Timmermans · #9 (**permalink**) 05.03.2014, 14:17

Ура!))) Спасибо всем большое) Особенно ksa) Всем плюсы)

Timmermans · #10 (**permalink**) 05.03.2014, 14:32

Сообщение от ksa

Тогда вообще не понятно, на что ты расчитывал, берясь за эту работу?

Ну я пока изучаю php не брался еще за js)) А кстати вопрос еще как сделать чтобы, с 21 до 7 утра тоже был стиль?

else if (hour>=18 && hour<7)

Так не выходит(

Форум

Справочник

Discord чат

Курсы javascript