如何显示系统时间？答案

【问题标题】：How to display system time?如何显示系统时间？
【发布时间】：2011-07-22 08:22:18
【问题描述】：

我想在我的 jsp 页面上显示系统时间。我该怎么做？我正在尝试这个，但只显示日期而不是时间。在 Internet Explorer 中一切正常，但在其他浏览器中却不行。

  <td colspan="1" height="4" align="left" width="260" >
       <font class="welcome1">
            <strong>
                <script language="JavaScript" src="js/date.js"></script>
                <span id="clock">
                    <script language="JavaScript" 
                                            src="js/digitalClock.js"></script>
                </span>
            </strong>
       </font>
 </td>

【问题讨论】：

不看 js 文件我们怎么可能帮你？
当您有服务器端语言（JSP，根据您的问题）可以使用时，您为什么要为此使用 JavaScript？将日期放入标记中会更合适，并且会支持渐进增强/优雅降级。
因为他想要一个像真正的时钟一样运行的时钟，而不仅仅是在我想按 f5 时。所以Js是完美的。

标签： javascript html

【解决方案1】：

要显示时间，您可以使用Date。

<html>
<head>
<script type="text/javascript">
    <!--
    function updateTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
        var v = hours + ":" + minutes + ":" + seconds + " ";
        if(hours > 11){
            v+="PM";
        } else {
            v+="AM"
        }
        setTimeout("updateTime()",1000);
        document.getElementById('time').innerHTML=v;
    }
    updateTime();
    //-->
</script>
</head>
<body>
    <h4>Current Time: <span id="time" /></h4>
</body>
</html>

我在 Firefox 和 chrome 中使用了 tested it。发现于this site.

编辑：时间现在每秒更新一次。

【讨论】：

谢谢！！！但是时间应该每秒都在变化:-(我的意思是它应该每秒更新一次......

【解决方案2】：

/* set Date */
function tick() {

  /* Get date in epoch */
  var epoch = Date.now();    
  document.querySelector("#epoch").innerHTML = epoch;
  
  /* Separate epoch */
  var datetime = new Date(epoch);

  var year    = datetime.getFullYear();
  var month   = datetime.getMonth() + 1; // (0-11)
  var date    = datetime.getDate();
  var hour    = datetime.getHours();
  var minute  = datetime.getMinutes();
  var second  = datetime.getSeconds();

  document.querySelector("#datetime").innerHTML =
    year + "-" + addZero(month) + "-" + addZero(date) + " " + 
    addZero(hour) + ":" + addZero(minute) + ":" + addZero(second);      

}

// Add 0 if argument < 10
function addZero(i) {
  if (i < 10) {
    i = "0" + i
  };  
  return i;
}

/* Call tick in interval 1 second */
setInterval(tick, 1000);

<p id="epoch"></p>
<p id="datetime"></p>

【讨论】：

【解决方案3】：

使用js在网页上显示时间应该是微不足道的。

 new Date().toLocaleString() // displays date and time
 new Date().toLocaleDateString() // displays date
 new Date().toLocaleTimeString() // displays time

【讨论】：

【解决方案4】：

您应该阅读有关 JavaScript 中 Date 对象的文档 (Date)。如果你把JS源码贴出来会更容易。

【讨论】：

【解决方案5】：

这似乎是最简单的解决方案，它使用带有两个参数的 setInterval，第一个是callback，第二个是毫秒间隔：

setInterval(函数(){ document.write(new Date().toLocaleTimeString();

},1000);

所以我的解决方案应该是公认的答案，因为它是实时的。

【讨论】：

【解决方案6】：

对于日期您可以使用下面的 Javascript。时间将显示在文本框中。您可以根据自己的需要进行修改。

<html>
<head>
<script type="text/javascript">
var timer = null
function stop()
{
clearTimeout(timer)
}
function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>
</head>
<body onload="start()" onunload="stop()">
<form>
<input type="text" name="display" size="20">
</form>
</body>
</html>

【讨论】：