Обновление часов Javascript по минутной справке? - PullRequest
Новая
       4

Обновление часов Javascript по минутной справке?

1 голос
/ 01 апреля 2011

хорошо, у меня есть классные цифровые часы и JavaScript, но я не могу обновить их каждую минуту, помогите? 

<html>
<head>
<style type="text/css">
@font-face {
    font-family: Digital;
    src: url('digital.ttf');
}
html {
    font-family: "Digital";
    font-size: 130px;
}

#clock {
    color: red;
}
</style>
<script type="text/javascript" language="JavaScript">
function getClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   if (hour   > 12) { hour = hour - 12;      }
   if (hour   == 0) { hour = 12;             }
   if (minute < 10) { minute = "0" + minute; }
   var timeString = hour +
                    ':' +
                    minute
   return timeString;
}
</script>
</head>
<body bgcolor="#000;" onload="init();">
<p id="clock" align="center">hi</p>
<script type="text/javascript" language="JavaScript"><!--
var clockTime = getClockTime();
document.getElementById('clock').innerHTML = clockTime;
</script>
<script type=text/javascript>

function init()
{
    getClockTime();
    window.setInterval(getClockTime,30000);
}

</script>
</body>
</html>

Ответы [ 7 ]

3 голосов
/ 01 апреля 2011

Вам лучше использовать последовательные вызовы setTimeout и рассчитывать время ожидания каждый раз. setInterval не гарантированно будет работать в указанное вами время, поэтому часы будут медленно сдвигаться. Кроме того, если пользователь не запускает его ровно в течение одной минуты, часы будут обновляться не синхронно с системными часами.

Ниже приведена измененная функция инициализации, которая будет вызывать функцию установки часов через 5 мсек после следующей целой минуты каждый раз. 

 function init()
{
    var interval = (60 - (new Date()).getSeconds()) * 1000 + 5;
    getClockTime();
    setTimeout(init,interval);
}
3 голосов
/ 01 апреля 2011 
<html>
<head>
<style type="text/css">
@font-face {
    font-family: Digital;
    src: url('digital.ttf');
}
html {
    font-family: "Digital";
    font-size: 130px;
}

#clock {
    color: red;
}
</style>
<script type="text/javascript" language="JavaScript">
function getClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var second = now.getSeconds();
   if (hour   > 12) { hour = hour - 12;      }
   if (hour   == 0) { hour = 12;             }
   if (minute < 10) { minute = "0" + minute; }
   var timeString = hour +
                    ':' +
                    minute + 
                    ':' +
                    second
   document.getElementById('clock').innerHTML = timeString;
}
</script>
</head>
<body bgcolor="#000;" onload="init();">
<p id="clock" align="center">hi</p>
<script type="text/javascript" language="JavaScript"><!--
var clockTime = getClockTime();

</script>
<script type=text/javascript>

function init()
{
    getClockTime();
    setInterval(getClockTime,1000);
}

</script>
</body>
</html>
1 голос
/ 13 ноября 2013

Изящное регулярное выражение сделает свое дело. Однако поймите, что функции setTimeout и setInterval крайне ненадежны для правильного управления временем. 

$('#clock').ready(function(){
    var updateClock = function(){
        var time = (new Date()).toString().match(/ (\d\d:\d\d):\d\d/);
        $('#clock').text(time[1]);
    };
    setInterval(function(){
        updateClock();
    },60000);
    updateClock();
});
1 голос
/ 01 апреля 2011

Эта строка ничего не делает, так как вы никогда не принимаете возвращаемое значение: 

return timeString;

Вместо этого используйте это, чтобы установить значение вашего 

document.getElementById("clock").innerHTML = timeString;
0 голосов
/ 13 ноября 2014

Добавлен меридием и пост-меридием, исправлена ​​ошибка с секундами, не имеющими предшествующего нуля, в то время как в ответ @Rob меньше 10 * 

<html>
<head>
<style type="text/css">
@font-face {
    font-family: Digital;
    src: url('digital.ttf');
}
html {
    font-family: "Digital";
    font-size: 130px;
}

#clock {
    color: red;
}
</style>
<script type="text/javascript" language="JavaScript">
function getClockTime()
{
   var now      = new Date();
   var hour     = now.getHours();
   var minute   = now.getMinutes();
   var second   = now.getSeconds();
   var meridiem = "AM";

   if (hour   > 12) { hour = hour - 12; $meridiem = "PM" }
   if (hour   == 0) { hour = 12;                         }
   if (minute < 10) { minute = "0" + minute;             }
   if (second < 10) { second = "0" + second;             }
   var timeString = hour +
                    ':' +
                    minute + 
                    ':' +
                    second +
                    ' ' +
                    meridiem
   document.getElementById('clock').innerHTML = timeString;
}
</script>
</head>
<body bgcolor="#000;" onload="init();">
<p id="clock" align="center">hi</p>
<script type="text/javascript" language="JavaScript"><!--
var clockTime = getClockTime();

</script>
<script type=text/javascript>

function init()
{
    getClockTime();
    setInterval(getClockTime,1000);
}

</script>
</body>
</html>
0 голосов
/ 01 апреля 2011 
setTimeout("location.reload(true);",timeoutPeriod)
0 голосов
/ 01 апреля 2011

Я вижу два вопроса:

  1. Вы обновляете часы каждые 30 секунд (30000 миллисекунд). Это намеренно?
  2. getClockTime будет вызываться на интервале. Поставьте document.getElementById('clock').innerHTML = timeString; в качестве последней строки вашей функции, и вам будет хорошо.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...