Аналоговые часы на JavaScript
Многие вебмастера добавляют на свои сайты разнообразные идущие часы. В данной теме мы рассмотрим JavaScript код для создания аналоговых часов, отображающих текущее время.
Идущие аналоговые часы, скрипт которых мы будем рассматривать, расположены чуть ниже:
Для получения на своем сайте аналогичных идущих часов на JavaScript, воспользуйтесь кодом, расположенным ниже. Для корректного отображения аналоговых часов на своем сайте, рекомендуем Вам поместить данный код в отдельный файл, и подгружать его в iframe, иначе могут возникнуть сложности с размещением.
<style type="text/css">
.clock_style {
width: 30px;
height: 30px;
padding-top: 10px;
font-size: 11px;
text-align: center;
color: #0000FF;
}
.clock {
position: absolute;
top: 0px;
left: 0px;
}
.clock2 {
position: absolute;
width: 2px;
height: 2px;
font-size: 2px;
}
</style>
<script type="text/javascript">
var Rad = 45;
var sec_Col = 'style="background: #FF0000;"';
var min_Col = 'style="background: #0000FF;"';
var hr_Col = 'style="background: #000000;"';
var HH = "....";
var MM = "......";
var SS = "........";
var Y = X = Rad + 15;
var d = document;
NS6 = (d.getElementById&&!d.all);
IE4 = (d.all);
if (NS6){
for (i=1; i<13; i++){
d.write('<div id="Digits' + i + '" class="clock clock_style">' + i + '</div>');
}
for (i=0; i<HH.length; i++){
d.write('<div id="Oz' + i + '" class="clock clock2" ' + hr_Col + '></div>');
}
for (i=0; i<MM.length; i++){
d.write('<div id="Oy' + i + '" class="clock clock2" ' + min_Col + '></div>');
}
for (i=0; i<SS.length; i++){
d.write('<div id="Ox' + i + '" class="clock clock2" ' + sec_Col + '></div>');
}
}
if (IE4){
d.write('<div class="clock"><div style="position:relative">');
for (i=1; i<13; i++){
d.write('<div id="Digits" class="clock clock_style">' + i + '</div>');
}
d.write('</div></div>');
d.write('<div class="clock"><div style="position:relative">');
for (i=0; i<HH.length; i++){
d.write('<div id="z" class="clock2" ' + hr_Col + '></div>');
}
d.write('</div></div>');
d.write('<div class="clock"><div style="position:relative">');
for (i=0; i<MM.length; i++){
d.write('<div id="y" class="clock2" ' + min_Col + '></div>');
}
d.write('</div></div>');
d.write('<div class="clock"><div style="position:relative">');
for (i=0; i<SS.length; i++){
d.write('<div id="x" class="clock2" ' + sec_Col + '></div>');
}
d.write('</div></div>');
}
function start_clock(){
time = new Date();
sec = Math.PI*time.getSeconds()/30 - 1.57;
min = Math.PI*time.getMinutes()/30 - 1.57;
hr = Math.PI*time.getHours()/6 + Math.PI*parseInt(time.getMinutes())/360 - 1.57;
if (NS6){
for (i=1; i<13; i++){
d.getElementById("Digits"+i).style.top = Y-15+Rad*Math.sin(i*Math.PI/6-1.51)
d.getElementById("Digits"+i).style.left = X-15+Rad*Math.cos(i*Math.PI/6-1.51)
}
for (i=0; i<HH.length; i++){
d.getElementById("Oz"+i).style.top = Y+i*Rad/9*Math.sin(hr);
d.getElementById("Oz"+i).style.left = X+i*Rad/9*Math.cos(hr);
}
for (i=0; i<MM.length; i++){
d.getElementById("Oy"+i).style.top = Y+i*Rad/9*Math.sin(min);
d.getElementById("Oy"+i).style.left = X+i*Rad/9*Math.cos(min);
}
for (i=0; i<SS.length; i++){
d.getElementById("Ox"+i).style.top = Y+i*Rad/9*Math.sin(sec);
d.getElementById("Ox"+i).style.left = X+i*Rad/9*Math.cos(sec);
}
}
if (IE4){
for (i=0; i<12;++i){
Digits[i].style.pixelTop = Y-15+Rad*Math.sin(i*Math.PI/6-1.045);
Digits[i].style.pixelLeft = X-15+Rad*Math.cos(i*Math.PI/6-1.045);
}
for (i=0; i<HH.length; i++){
z[i].style.pixelTop = Y+i*Rad/9*Math.sin(hr);
z[i].style.pixelLeft = X+i*Rad/9*Math.cos(hr);
}
for (i=0; i<MM.length; i++){
y[i].style.pixelTop = Y+i*Rad/9*Math.sin(min);
y[i].style.pixelLeft = X+i*Rad/9*Math.cos(min);
}
for (i=0; i<SS.length; i++){
x[i].style.pixelTop = Y+i*Rad/9*Math.sin(sec);
x[i].style.pixelLeft = X+i*Rad/9*Math.cos(sec);
}
}
setTimeout("start_clock()", 100);
}
start_clock();
</script>Пусть размер данного кода Вас не пугает, так как он делался с учетом старых браузеров и большая его часть не участвует для отображения времени для конкретного пользователя.
Если Вы все сделали правильно (восстановили разорванные строчки), то у Вас должны получиться точно такие же идущие аналоговые часы, как и в примере, показанном выше.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Автор, не могли бы "почистить" скрипт (от старых браузеров, которые уже, спустя четыре года, по-любому не используются) и выложить обновленный вариант? Был бы очень благодарен... А то я очень мало чего понимаю в яваскрипте, и очень большую часть этих кодов вообще не могу "прочитать".
На форуме выложил новый скрипт без поддержки старых браузеров.