3

次のJavascriptコードを使用して、自分のWebサイトに時刻を表示しています。この更新を自動的に行うにはどうすればよいですか。

ありがとう

<section class="portlet grid_6 leading"> 
<header>
<h2>Time<span id="time_span"></span></h2>
</header>
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10){
    minutes = "0" + minutes
}
var t_str = hours + ":" + minutes + " ";
if(hours > 11){
    t_str += "PM";
} else {
   t_str += "AM";
}
document.getElementById('time_span').innerHTML = t_str;
</script>
</section>
4

9 に答える 9

13

setTimeout(..)を使用して、特定の時間後に関数を呼び出します。この特定のケースでは、setInterval(..)を使用することをお勧めします。

function updateTime(){
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    if (minutes < 10){
        minutes = "0" + minutes
    }
    var t_str = hours + ":" + minutes + " ";
    if(hours > 11){
        t_str += "PM";
    } else {
        t_str += "AM";
    }
    document.getElementById('time_span').innerHTML = t_str;
}
setInterval(updateTime, 1000);
于 2012-05-06T13:23:40.677 に答える
2

ページのセクションにupdateClock()配置された関数にすべての JavaScript コードを追加し、そのようにタグを変更します。<head><body>

<body onload="updateClock(); setInterval('updateClock()', 1000 )">

毎秒時間を再計算して再表示します。時間と分のみを表示するため、より長い間隔を使用できます。毎回時間を更新したい場合numSecondsは、次のようなものを使用する必要があります

<body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000 )">

そしてもちろん、これは、そこにある膨大な数の解決策の 1 つにすぎません。

于 2012-05-06T13:29:07.277 に答える
1

そこにはたくさんの時計ライブラリがあります。おそらく、この以前の投稿をチェックしてください: jquery クロックタイマーを作成する方法

于 2012-05-06T13:25:24.297 に答える
1

これを試してください、より整頓されたバージョン：

var el = document.getElementById('time_span')
setInterval(function() {

    var currentTime = new Date(),
        hours = currentTime.getHours(),
        minutes = currentTime.getMinutes(),
        ampm = hours > 11 ? 'PM' : 'AM';

    hours += hours < 10 ? '0' : '';
    minutes += minutes < 10 ? '0' : '';

    el.innerHTML = hours + ":" + minutes + " " + ampm;
}, 1000);
于 2012-05-06T13:28:24.760 に答える
0

もう少し面倒ではありません：

timer();

function timer(){
 var now     = new Date,
     hours   = now.getHours(),
     ampm    = hours<12 ? ' AM' : ' PM',
     minutes = now.getMinutes(),
     seconds = now.getSeconds(),
     t_str   = [hours-12, //otherwise: what's the use of AM/PM?
                (minutes < 10 ? "0" + minutes : minutes),
                (seconds < 10 ? "0" + seconds : seconds)]
                 .join(':') + ampm;
 document.getElementById('time_span').innerHTML = t_str;
 setTimeout(timer,1000);
}

setTimeoutタイマーは、タイマー機能内からを使用して、（おおよそ）毎秒（= 1000 Ms）更新します。

実際の動作をご覧ください

于 2012-05-06T13:45:40.067 に答える
0 

GetTime();

function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()

  if(minute < 10){
    minute = "0" + minute
  }

  if(second < 10){
    second = "0" + second
  }

  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";

  if(hour > 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }

  document.getElementById("CurrentTime").innerHTML = GetCurrentTime;
  setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>

于 2020-09-06T17:21:35.233 に答える
0 

GetTime();

function GetTime(){
  var CurrentTime = new Date()
  var hour = CurrentTime.getHours()
  var minute = CurrentTime.getMinutes()
  var second = CurrentTime.getSeconds()

  if(minute < 10){
    minute = "0" + minute
  }

  if(second < 10){
    second = "0" + second
  }

  var GetCurrentTime = hour + ":" + minute + ":" + second + " ";

  if(hour > 11){
    GetCurrentTime += "p.m."
  }else{
    GetCurrentTime += "a.m."
  }
<!-- Try changing innerHTML to document.getElementById("CurrentTime").value -->
  document.getElementById("CurrentTime").value = GetCurrentTime;
  setTimeout(GetTime,1000)
}
<span id="CurrentTime"></span>

于 2021-02-11T10:10:57.737 に答える