Перенести код часов javascript из файла HTML во внешний файл .js

Итак, я сделал часы, они отлично работают. Теперь я хочу переместить javascript во внешний файл и связать его с

<SCRIPT  type="text/javascript" language="JavaScript" src="clock.js"
</SCRIPT>

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

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

javascript external clock
person travis    schedule 12.07.2011    source источник
comment
Вместо setTimeout попробуйте setInterval и не используйте кавычки в setInterval (просто сделайте setInterval(startTime, 500)).   -  person beatgammit    schedule 12.07.2011
comment
@travis, - tjameson прав, используйте setInterval, setTimeout запускает функцию один раз с заданным интервалом, например, задерживая ее. setInterval запускает функцию непрерывно с заданным интервалом. Вы можете остановить функцию, используя removeInterval(intervalId)   -  person dpp    schedule 12.07.2011
comment
@tjameson - существующий setTimeout - это последняя строка функции, которая будет вызываться по истечении времени ожидания, поэтому замена ее на setInterval была бы очень плохой идеей. Можно полностью удалить его из функции и использовать setInterval в обработчике onload.   -  person nnnnnn    schedule 12.07.2011
comment
@ tjameson Это сработало, но уже довольно нервно. отсутствует 2 или 3 секунды как в Chrome, так и в Firefox ....   -  person travis    schedule 12.07.2011

Ответы (2)


arrow_upward
0
arrow_downward

Вот как бы я это сделал. Поместите этот код во внешний файл js:

function startTime() {
    var today=new Date(),
        h=today.getHours(),
        m=today.getMinutes(),
        s=today.getSeconds();

    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
}

function checkTime(i) {
    if (i<10) {
        i="0" + i;
    }
    return i;
}

А затем на вашей главной html-странице что-то вроде этого:

<body onload="setInterval(startTime, 500);">
person beatgammit    schedule 12.07.2011
comment
<body onload="setInterval(function(){ startTime('txt'); }, 500);"> - это мое предложение - передайте идентификатор элемента div функции startTime, которая, в свою очередь, будет изменена, чтобы принять идентификатор в качестве параметра, чтобы его можно было легко применить к нескольким страницам с элементами с разными идентификаторами. - person nnnnnn; 12.07.2011

arrow_upward
0
arrow_downward

У вас отсутствует окончание >

<SCRIPT type = "text / javascript" language = "JavaScript" src = "clock.js" >

так и должно быть

<SCRIPT  type="text/javascript" language="JavaScript" src="clock.js">
</SCRIPT>
person genesis    schedule 12.07.2011
comment
так что просто попробуйте удалить language = JavaScript, я не уверен, что он должен быть там - person genesis; 12.07.2011
comment
а также откройте свой firebug (например, Firefox) на веб-вкладке и скажите мне: загружается ли clock.js сам? - person genesis; 12.07.2011