如何将日期和时间时钟添加到网站？答案

【问题标题】：How can I add a date and time clock to a website?如何将日期和时间时钟添加到网站？
【发布时间】：2019-03-23 05:21:31
【问题描述】：

我需要向网站添加日期和时钟。它应该以非常特定的格式显示日期和时间，占用两行并使用 GMT-4 的预期时区；例如：

2019 年 3 月 23 日，星期六
晚上 10 点 33 分 56 秒

这恰好是一个学校项目，但我对 Javascript 的了解有限。我尝试查找一些示例并发现了一些有趣的东西，但我无法调整这些示例以生成所需格式的输出。

【问题讨论】：

你检查过MDN docs for the JS Date object methods

标签： javascript html date datetime

【解决方案1】：

请试试这个

function display_c(){
   var refresh=1000; // Refresh rate in milli seconds
   mytime=setTimeout('display_ct()',refresh)
}

function display_ct() {
  var CDate = new Date()
  var NewDate=CDate.toDateString(); 
  NewDate = NewDate + " - " + CDate.toLocaleTimeString();
  document.getElementById('ct').innerHTML = NewDate;
  display_c();
}

<html>
<head> </head>

<body onload=display_ct();>
  <span id='ct' ></span>
</body>
</html>

更改日期或时间格式请参考link

【讨论】：

在此处了解更多信息：plus2net.com/javascript_tutorial/clock.php :/ copy&paste

【解决方案2】：

通过 toDateString() 方法获取 currentDate 并通过 toLocaleTimeString 获取当前时间并将两者都附加到您的 DOM 中。并每隔1000 ms 调用一次以获取更新的值。

function callDateTime(){
    var currentDate=(new Date()).toDateString();
    var currentTime=(new Date()).toLocaleTimeString(); 
    document.getElementById('watch').innerHTML=`${currentDate}-${currentTime}`;
  }
  
 
setInterval(function(){  callDateTime() }, 1000);

&lt;p id="watch"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

您可以将 HTML 添加到您的文档的body：

另外，你可以在</body>之前添加类似这样的JavaScript：

代码：

function clock(){
    window.rt=1000;r=0;
    document.getElementById('t-0').textContent=new Date().toLocaleDateString(); // today
    var m=setInterval(function(){
        if(r>84600){clearInterval(m);}
        r++;
        document.getElementById('t-2').textContent=new Date().toLocaleTimeString(); // clock
    }, window.rt);
}

<!DOCTYPE html>
<html lang="en">
    <title>Clock</title>
    <body onload="clock();">

        <div style="text-align:center;">
            ?
            <b id="t-0">00/00/0000</b>
            ⏰
            <b id="t-2">00:00:00</b>
        </div>

    </body>
</html>

【讨论】：