制作 00:00 格式的实时时钟答案

【问题标题】：Make a live clock in 00:00 format制作 00:00 格式的实时时钟
【发布时间】：2020-11-26 13:59:26
【问题描述】：

如何制作 00:00 格式的实时时钟？我在下面包含了我的代码。有没有办法更好地或使用更短的代码来做到这一点？

HTML

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

现在我们只需要添加 javascript 部分。这会每秒刷新时钟，使其“Live”。它还使用getMinutes 之类的函数来获取当前时间。

Javascript

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }

这 1000 毫秒可以换得更多或更少。 1000 等于 1 秒，因此这意味着 500 毫秒将是 0.5 秒。

我将在此处将我的代码包含在可执行文件中：

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }

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

【问题讨论】：

只是提示，分钟只显示为个位数，没有0，所以显示的是15:3而不是15:03
有没有办法解决这个问题？
请适当标记！您所展示的任何内容都没有涉及php。
对不起。我会立即删除此标签！编辑：它已经完成了。谢谢！
@MarkdG 也许这个答案会有所帮助：stackoverflow.com/questions/10073699/…

标签： javascript html

【解决方案1】：

您需要使用setInterval 而不是setTimeout。此外，您可以使用 padStart() 函数将前导零添加到您的 string 值中。

Ps：因为你只显示小时和分钟，时钟将每分钟更新一次，而不是每秒钟更新一次。（函数仍然每秒运行一次）

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

function display_ct() {
  var x = new Date()
  x1 = x.getHours().toString().padStart(2,0) + ":" + x.getMinutes().toString().padStart(2,0);
  document.getElementById('ct').innerHTML = x1;
  display_c();
}

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

【讨论】：

这行得通。它正确显示了现在的时间！我会在两分钟内接受这个答案。

【解决方案2】：

像这样在主页内外制作一个 js

您必须有一个以 MyClockDisplay 作为此代码 id 的元素

    function showTime() {
        var date = new Date();
        var h = date.getHours(); // 0 - 23
        var m = date.getMinutes(); // 0 - 59
        var s = date.getSeconds(); // 0 - 59
        var session = "AM";
        if (h == 0) {
            h = 12;
        }
        if (h > 12) {
            h = h - 12;
            session = "PM";
        }
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;
        var time = h + ":" + m + ":" + s + " " + session;
        document.getElementById("MyClockDisplay").innerText = time;
        document.getElementById("MyClockDisplay").textContent = time;
        setTimeout(showTime, 1000);
    }
    showTime();

&lt;div id="MyClockDisplay"&gt;&lt;/div&gt;

【讨论】：