Question

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

2019年3月23日星期六
晚上10:33:56

这碰巧是一个学校项目，但是我对Javascript的了解有限。我尝试查找一些示例并找到了一些有趣的内容，但是我无法适应这些示例以生成所需格式的输出。

Answer 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

Answer 2

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

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

<p id="watch"></p>

Answer 3

您可以在文档的body中添加HTML：

此外，您可以在</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>

如何向网站添加日期和时间时钟？

3 个答案:

代码：