Скрипт цифровых часов
На некоторых сайтах в виде дополнения к дизайну имеются идущие цифровые часы. В данной теме мы рассмотрим, как сделать что-нибудь подобное на JavaScript.
Ранее мы уже рассматривали, как сделать простейшие часы, отображающие текущее время в теме Скрипт текущей даты и времени. Потом мы также рассмотрели вариант того, как можно сделать Аналоговые часы на JavaScript. Теперь мы добрались до того, как сделать свои собственные красочные цифровые часы себе на сайт.
Ниже Вы можете наблюдать простой пример идущих цифровых часов:
Сразу скажу, что данные часы получаются из набора файлов изображений с цифрами от 0 до 9, двоеточия и изображения, обозначающего текущую половину дня. При желании Вы всегда сможете заменить предложенные изображения на свои, более красочные, для того чтобы они более удачно вписались в дизайн Вашего сайта.
Для создания точно таких же цифровых часов, Вам понадобиться добавить на свой сайт девять изображений, которые сформируют основу для наших часов. Делается это так:
<img src="image/time/img0.gif" id="h10" alt="">
<img src="image/time/img0.gif" id="h1" alt="">
<img src="image/time/colon.gif" alt="">
<img src="image/time/img0.gif" id="m10" alt="">
<img src="image/time/img0.gif" id="m1" alt="">
<img src="image/time/colon.gif" alt="">
<img src="image/time/img0.gif" id="s10" alt="">
<img src="image/time/img0.gif" id="s1" alt="">
<img src="image/time/day_am.gif" id="hday" alt="">
После копирования выше приведенного кода, вытяните данный код в одну строку, чтобы между изображениями цифр часов не появились пробелы.
Далее расположен JavaScript код, при добавлении которого на свой сайт, Вы "оживите" собранные из изображений часы и получите точно такие же цифровые часы, отображающие текущее время, как и в примере, показанном выше:
<script type="text/javascript">
var folder = "image/time/";
var day_am = "day_am.gif";
var day_pm = "day_pm.gif";
var pict = new Array("img0.gif", "img1.gif", "img2.gif", "img3.gif", "img4.gif",
"img5.gif", "img6.gif", "img7.gif", "img8.gif", "img9.gif");
function extract(type, hr, min, sec) {
var d = document;
if (hr<=9) {
d.getElementById("h10").src = folder + pict[0];
d.getElementById("h1").src = folder + pict[hr]; }
else {
d.getElementById("h10").src = folder + pict[Math.floor(hr/10)];
d.getElementById("h1").src = folder + pict[hr%10]; }
if (min<=9) {
d.getElementById("m10").src = folder + pict[0];
d.getElementById("m1").src = folder + pict[min]; }
else {
d.getElementById("m10").src = folder + pict[Math.floor(min/10)];
d.getElementById("m1").src = folder + pict[min%10]; }
if (sec<=9) {
d.getElementById("s10").src = folder + pict[0];
d.getElementById("s1").src = folder + pict[sec]; }
else {
d.getElementById("s10").src = folder + pict[Math.floor(sec/10)];
d.getElementById("s1").src = folder + pict[sec%10]; }
if (type=="AM") url = day_am;
else url = day_pm;
d.getElementById("hday").src = folder + url;
}
function show() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var half_day = "AM";
if ((hours>=12)&&(minutes>=1)||(hours>=13)) {
half_day = "PM";
hours -= 12;
}
if (hours==0) hours = 12;
extract(half_day, hours, minutes, time.getSeconds());
setTimeout("show()", 100)
}
show();
</script>Пусть Вас не смущает внешний вид показанных в нашем примере часов, т.к. мы выложили специально упрощенный вариант для понятия сути работы скрипта, а красочные изображения с цифрами Вы сможете нарисовать сами, либо найти в сети.
Скачать все изображения, необходимые для работы нашего скрипта, формирующего цифровые часы, как в примере, можно с нашего сайта по ссылке - цифры для часов.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.