Идущие часы на заднем фоне
В данной теме мы рассмотрим, как сделать идущие цифровые часы при помощи JavaScript. Основным отличием данных идущих часов от подобных будет являться то, что наши часы будут располагаться на заднем фоне странички под основным содержимым этой самой странички. Дополнительно к данным часам будет добавлена тень.
Пример работы скрипта, реализующего идущие цифровые часы на заднем фоне Вы можете наблюдать прямо под данным текстом.
Для получения точно таких же идущих часов на заднем фоне добавьте следующий 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> добавьте следующий код:
<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: 0;
left: 60px;
font-size: 150px;
z-index: 1;
}
</style>Теперь нам остается только должным образом оформить наш текст, под которым будет показываться текущее время. Делается это так:
<div style="position: relative;">
<div id="bg_clock_shade" class="clock_shade"></div>
<div id="bg_clock" class="clock"></div>
</div>
<p style="position: relative; z-index: 10;">
Тут располагается произвольный текст, который будет поверх часов.</p>
<p style="position: relative; z-index: 10;">
Аналогично, любой произвольный текст.</p>После добавления всех выше перечисленных кодов, теперь нам остается только запустить наши часы, чтобы они показывали текущее время. Просто добавьте данный код в конец Вашей странички функцию start_clock():
<script type="text/javascript">
start_clock();
</script>В результате добавления всех выше перечисленных блоков кода к себе на страничку, у Вас должны получиться точно такие же идущие на заднем фоне цифровые часы, как и в нашем примере.
Если Вам необходимы часы попроще, то рекомендуем Вам посетить другие наши темы:
Простой PHP скрипт, отображающий текущую дату и время.
Скрипт текущей даты и времени.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.