Каскадный режим | Линейный режим

***Admin*** · 27.03.2016 22:14:09

Данный скрипт является обновленным и упрощенным скриптом Аналоговых часов на JavaScript.

В нем мы избавились от поддержки старых браузеров, вынесли стили из кода в CSS и немного подсократили код. Как видно, разница существенная:

Код:

<style type="text/css">

.clock, .clock2{ position:absolute; top:0px; left:0px; }

.clock{ color:#0000FF; width:30px; height:30px; padding-top:10px; font-size:11px; text-align:center; }

.clock2{ width:2px; height:2px; font-size:2px; }

.blue{ background-color:#0000FF; }

.red{ background-color:#FF0000; }

.black{ background-color:#0000FF; }

</style>

<script type="text/javascript">

Rad=45; Y=X=Rad+15;

HH='....'; MM='......'; SS='........';

for (i=1; i<13; i++) document.write('<b id="Digits'+i+'" class="clock">'+i+'</b>');

for (i=0; i<HH.length; i++) document.write('<b id="Oz'+i+'" class="clock2 black"></b>');

for (i=0; i<MM.length; i++) document.write('<b id="Oy'+i+'" class="clock2 blue"></b>');

for (i=0; i<SS.length; i++) document.write('<b id="Ox'+i+'" class="clock2 red"></b>');

function start_clock(){

time=new Date();

PI_6=Math.PI/6;

sec=PI_6*time.getSeconds()/5-1.57;

min=PI_6*time.getMinutes()/5-1.57;

hr=PI_6*time.getHours()+PI_6*parseInt(time.getMinutes())/60-1.57;

for (i=1; i<13; i++){

 document.getElementById("Digits"+i).style.top=Y-15+Rad*Math.sin(i*PI_6-1.57)

 document.getElementById("Digits"+i).style.left=X-15+Rad*Math.cos(i*PI_6-1.57)

}

for (i=0; i<HH.length; i++){

 document.getElementById("Oz"+i).style.top=Y+i*Rad/9*Math.sin(hr);

 document.getElementById("Oz"+i).style.left=X+i*Rad/9*Math.cos(hr);

}

for (i=0; i<MM.length; i++){

 document.getElementById("Oy"+i).style.top=Y+i*Rad/9*Math.sin(min);

 document.getElementById("Oy"+i).style.left=X+i*Rad/9*Math.cos(min);

}

for (i=0; i<SS.length; i++){

 document.getElementById("Ox"+i).style.top=Y+i*Rad/9*Math.sin(sec);

 document.getElementById("Ox"+i).style.left=X+i*Rad/9*Math.cos(sec);

}

}

start_clock();

timer=setInterval('start_clock()',1000);

</script>

Булат Азат улы · 28.03.2016 07:27:21

А часы-то так же стоят, на левом верхнем краю монитора, столпившись в одну цифру Sad

Я этот и так, и этак пробовал менять - нет, все так же. И еще, мозилла через минуту работы с этой вкладкой зависает.
Вот мой код, полный HTML:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>Javascript часы</title>

        <script type="text/javascript" src="js/jqueryLib.js"></script>

    </head>

    <body>

    <div>

    <style type="text/css">

        .clock {

            color: #0000FF;

            width: 30px;

            height: 30px;

            padding-top: 10px;

            font-size: 11px;

            text-align: center;

            position: absolute;

            top: 10px;

            left: 10px;

        }

        .clock2 {

            width: 2px;

            height: 2px;

            font-size: 2px;

            position: absolute;

            top: 10px;

            left: 10px;

        }

        .blue {

            background-color: #0000FF;

        }

        .red {

            background-color: #FF0000;

        }

        .black {

            background-color: #0000FF;

        }

    </style>

<script type="text/javascript">

var Rad=45;

var Y=X=(Rad+15);

var HH='....';

var MM='......';

var SS='........';

for (i=1; i<13; i++) {

    document.write('<b id="Digits'+i+'" class="clock">'+i+'</b>');

}

for (i=0; i<HH.length; i++) {

    document.write('<b id="Oz'+i+'" class="clock2 black"></b>');

}

for (i=0; i<MM.length; i++) {

    document.write('<b id="Oy'+i+'" class="clock2 blue"></b>');

}

for (i=0; i<SS.length; i++) {

    document.write('<b id="Ox'+i+'" class="clock2 red"></b>');

}

function start_clock(){

    var time=new Date();

    var PI_6=Math.PI/6;

    var sec=PI_6*time.getSeconds()/5-1.57;

    var min=PI_6*time.getMinutes()/5-1.57;

    var hr=PI_6*time.getHours()+PI_6*parseInt(time.getMinutes())/60-1.57;

    for (i=1; i<13; i++){

    document.getElementById("Digits"+i).style.top=Y-15+Rad*Math.sin(i*PI_6-1.57);

    document.getElementById("Digits"+i).style.left=X-15+Rad*Math.cos(i*PI_6-1.57);

    }

    for (i=0; i<HH.length; i++){

    document.getElementById("Oz"+i).style.top=Y+i*Rad/9*Math.sin(hr);

    document.getElementById("Oz"+i).style.left=X+i*Rad/9*Math.cos(hr);

    }

    for (i=0; i<MM.length; i++){

    document.getElementById("Oy"+i).style.top=Y+i*Rad/9*Math.sin(min);

    document.getElementById("Oy"+i).style.left=X+i*Rad/9*Math.cos(min);

    }

    for (i=0; i<SS.length; i++){

    document.getElementById("Ox"+i).style.top=Y+i*Rad/9*Math.sin(sec);

    document.getElementById("Ox"+i).style.left=X+i*Rad/9*Math.cos(sec);

    }

}

start_clock();

timer=setInterval(start_clock, 1000);

</script>

    </div>

    </body>

</html>

***Admin*** · 28.03.2016 19:50:45

Скрипту не нравится строчка: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Как писал в основной теме, рекомендуется размещать данные часики через iframe, тогда DOCTYPE мешать не будет.

P.S. Прикрепленное Вами изображение имело битую ссылку, и поэтому я его удалил.

Булат Азат улы · 28.03.2016 21:11:06

Спасибо Вам большое! Я все понял! Спасибо Вам за хорошие скрипты!!! Happy

Каскадный режим \| Линейный режим Обновленный скрипт аналоговых часов на JavaScript
Автор	Сообщение