Почему текущее время, отображаемое с помощью JavaScript, не обновляется без перезагрузки страницы?

На моем веб-сайте я хочу, чтобы время показывалось в реальном времени и обновлялось автоматически без необходимости обновления страницы.

У меня есть в заголовке index.php следующее:

<script src="/../scripts/time.js"></script>

time.js — это скрипт ниже:

var currentTime = new Date(),
      hours = currentTime.getHours(),
      minutes = currentTime.getMinutes();
    if (minutes < 10) {
     minutes = "0" + minutes;
  }
    document.write(hours + ":" + minutes)

Он действительно правильно показывает текущее время, но не обновляется без обновления/перезагрузки веб-страницы. Я считаю, что на самом деле он должен обновляться автоматически, поскольку он находится в JavaScript (который, как известно, может это делать).

Что я мог сделать не так?


javascript time refresh live
person Job    schedule 15.01.2019    source источник
comment
JS не обновляется автоматически. Ваш ответ в разделе Как настроить автоматическое обновление времени Javascript   -  person Minh Nguyen    schedule 15.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы взяли currentTime только один раз. Вы должны получить их "интервалами". Вот пример кода, взятый из w3schools.com: метод Window clearInterval():

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>

См. здесь.

Примечание. Пример clearInterval() приведен намеренно, чтобы сделать шаг к пониманию идеи.

person Cold Cerberus    schedule 15.01.2019
comment
спасибо это сработало! Я просто скопировал этот скрипт из «Tryit Editior» w3schools, и теперь он работает! - person Job; 15.01.2019