Идущие часы на заднем фоне - посмотреть код бесплатно

думаю, что описание не нужно, т.к. из названия и так всё понятно


                        
JavaScript код:



<script type="text/javascript">

function start_clock() {

 now_time= new Date();

 var hours=now_time.getHours();

 var minutes=now_time.getMinutes();

 var seconds=now_time.getSeconds();

 if (eval(hours)<10) hours="0" + hours;

 if (eval(minutes)< 10) minutes="0" + minutes;

 if (seconds< 10) seconds="0" + seconds;

 now_time = hours + ":" + minutes + ":" + seconds;



 document.getElementById("bg_clock_shade").innerHTML=now_time;

 document.getElementById("bg_clock").innerHTML=now_time;



 var timer=setTimeout("start_clock()",500)

}

</script>



Далее необходимо прописать стиль наших часов. Для этого между тегами <head></head> добавьте следующий код:

HTML код:



<style type="text/css">

.clock_shade {

 position:absolute;

 color:Deepskyblue;

 top:3px;

 left:63px;

 font-size:150px;

 z-index:1;

}

.clock {

 position:absolute;

 color:Silver;

 top:0px;

 left:60px;

 font-size:150px;

 z-index:1;

}

</style>



Теперь нам остается только должным образом оформить наш текст, под которым будут идти наши часы. Делается это так:

HTML код:



<div style="position:relative;">

<div id="bg_clock_shade" class="clock_shade"></div>

<div id="bg_clock" class="clock"></div>



<p align="justify" style="position:relative; z-index:10;">

Тут располагается текст, который будет поверх часов.</p>

<br>

<p align="justify" style="position:relative; z-index:10;">

Тут располагается текст, который будет поверх часов.</p>

</div>



После добавления всех выше перечисленных кодов, теперь нам остается только запустить наши часы чтобы они показывали текущее время. Просто добавьте данный код в конец Вашей странички:

JavaScript код:



<script type="text/javascript">

 start_clock();

</script>



В результате добавления всех выше перечисленных блоков кода к себе на страничку, у Вас должны получиться идущие на заднем фоне часы.

Limp_Bizkit

Комментарии

Без комментариев...

Поделиться кодом

Пожаловаться на код

Переслать код