Mobatime Systems: специалист в области разработки, производства и поставки приборов и систем единого времени - Главная страница   Предприятие Mobatime Group в России, первичные, вторичные часы, серверы времени: разработка, производство, продажа, техническая поддержка - Главная страница
Точное время MSK/MSD Время сервера с публичного NTP сервера компании Mobatime Systems. Подробнее...
Навигация
Общая информация
Mobatime Systems
Наши новости
Термины и определения
О компании
Пресса
Реселлеры
Mobatime Group
Карта сайта
Серийная продукция
Серверы времени
Сетевые интерфейсы
Первичные часы
Часовые станции
Стрелочные часы
Стрелочные часы для улицы
Цифровые часы
Цифровые часы для улицы
Интерфейсные модули
Текстовые информационные панели
Уникальная продукция
Арктическое исполнение
Фасадные часы
Городские часы
Интерьерные часы
Часы для чистых помещений
Место встречи
Уличные часы Петербурга
Бесплатные ресурсы
Часы на JavaScript
Часы на Flash
Скринсейверы
Публичный NTP сервер
Идеи
Часы и здания
Солнечные часы
Все про часы
Поиск
 
Mobatime Systems arrow Часы на JavaScript arrow Круглые часы с секундной стрелкой без использования графики
Круглые часы с секундной стрелкой без использования графики Печать

Идущие часы с секундной стрелкой, для вывода которых не используется графика.

Пример работы скрипта:

 

 
1
2
3
4
5
6
7
8
9
10
11
12
 
.
.
.
.
.
.
.
.
.
.
.
.

 

 

 

 

 

 

 

 

 

Код страницы (сохраните его в файле с расширением html):<html>
<head>
<title>Круглые часы с секундной стрелкой без графики</title>
<script language="JavaScript">
pX = 100;
pY = 100;
obs = new Array(13);
function ob() {
for (i = 0; i < 13; i++) {
if (document.all) obs[i] = new Array (eval('ob'+i).style,-100,-100);
else obs[i] = new Array (eval('document.ob'+i),-100,-100);
}
}
function cl(a, b, c) {
if (document.all) {
if (a != 0) b += -1;
eval('c'+a+'.style.pixelTop='+(pY+(c)));
eval('c'+a+'.style.pixelLeft='+(pX+(b)));
}
else {
if (a != 0) b += 10;
eval('document.c'+a+'.top='+(pY+(c)));
eval('document.c'+a+'.left='+(pX+(b)));
}
}
function runClock() {
for (i = 0; i < 13; i++) {
obs[i][0].left=obs[i][1]+pX;
obs[i][0].top=obs[i][2]+pY;
}
}
var lastsec;
function timer() {
time = new Date ();
sec = time.getSeconds();
if (sec != lastsec) {
lastsec = sec;
sec = Math.PI * sec / 30;
min = Math.PI * time.getMinutes() / 30;
hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 1; i < 6; i++) {
obs[i][1] = Math.sin(sec) * (44 - (i-1) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(sec) * (44 - (i-1) * 11) - 27;
}
for (i = 6;i < 10; i++) {
obs[i][1] = Math.sin(min) * (40 - (i-6) * 10) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(min) * (40 - (i-6) * 10) - 27;
}
for (i = 10; i < 13; i++) {
obs[i][1] = Math.sin(hr) * (37 - (i-10) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(hr) * (37 - (i-10) * 11) - 27;
}
}
}
function setNum() {
cl (0, -67, -65);
cl (1, 10, -51);
cl (2, 28, -33);
cl (3, 35, -8);
cl (4, 28, 17);
cl (5, 10, 35);
cl (6, -15, 42);
cl (7, -40, 35);
cl (8, -58, 17);
cl (9, -65, -8);
cl (10, -58, -33);
cl (11, -40, -51);
cl (12, -16, -56);
}
function startClock() {
ob();
setNum();
setInterval('timer()', 100);
setInterval('runClock()', 100);
}
</script>
<style>
.num { color:black; width:30px; text-align:center; top: -20px; position: absolute; font: bold 11px courier, arial; }
</style>
</head>
<body onLoad="javascript:startClock();">
<div id="c0" style="Z-INDEX: 2; LEFT: 38px; TOP: 36px" ></div>
<div id="c1" class="num" style="Z-INDEX: 5; LEFT: 170px;">1</div>
<div id="c2" class="num" style="Z-INDEX: 5; LEFT: 170px;">2</div>
<div id="c3" class="num" style="Z-INDEX: 5; LEFT: 170px;">3</div>
<div id="c4" class="num" style="Z-INDEX: 5; LEFT: 170px;">4</div>
<div id="c5" class="num" style="Z-INDEX: 5; LEFT: 170px;">5</div>
<div id="c6" class="num" style="Z-INDEX: 5; LEFT: 170px;">6</div>
<div id="c7" class="num" style="Z-INDEX: 5; LEFT: 170px;">7</div>
<div id="c8" class="num" style="Z-INDEX: 5; LEFT: 170px;">8</div>
<div id="c9" class="num" style="Z-INDEX: 5; LEFT: 170px;">9</div>
<div id="c10" class="num" style="Z-INDEX: 5; LEFT: 170px;">10</div>
<div id="c11" class="num" style="Z-INDEX: 5; LEFT: 170px;">11</div>
<div id="c12" class="num" style="Z-INDEX: 5; LEFT: 170px;">12</div>
<div id="ob0" class="num" style="Z-INDEX: 1; LEFT: -170px;"></div>
<div id="ob1" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob2" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob3" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob4" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob5" class="num" style="Z-INDEX: 8; LEFT: -170px; color: #0000ff; font-size: x-large;">.</div>
<div id="ob6" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob7" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob8" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob9" class="num" style="Z-INDEX: 7; LEFT: -170px; color: #00ffff; font-size: x-large;">.</div>
<div id="ob10" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
<div id="ob11" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
<div id="ob12" class="num" style="Z-INDEX: 6; LEFT: -170px; color: #ffff00; font-size: x-large;">.</div>
</body>
</html>
 
< Пред.   След. >
 
Информация
Offline
Коммерческие вопросы
Технические вопросы
Запрос адреса NTP сервера
Online
Тел.: +7 (812) 677-82-84
Факс:+7 (812) 677-82-85
Новости от Google
Точное время
Переход на зимнее время
Посещаемость
Топ-10 уникальных посетителей за 30 дней:

free counters
© 2006-2017, "Мобатайм Системс", 192148, Санкт-Петербург, ул. Седова, 46, тел.: +7 (812) 677-82-84, факс: +7 (812) 677-82-85