javascript - 以 12 小时格式显示时间

Question

嗨，下面的代码为我提供了当前时间，但采用 24 小时格式，但是我想以 12 小时格式显示时间，下面是我正在使用的代码。请建议我该怎么办？我尝试了很多代码但无法做到。

                <div id="timedate">
                    <a id="mon">January</a>
                    <a id="d">1</a>,
                    <a id="y">0</a><br />
                    <a id="h">12</a>:
                    <a id="m">00</a>:
                    <a id="s">00</a>
                    <a id="mi">000</a>
                  </div>

                <script>
                // START CLOCK SCRIPT

                Number.prototype.pad = function(n) {
                  for (var r = this.toString(); r.length < n; r = 0 + r);
                  return r;
                };

                function updateClock() {
                  var now = new Date();
                  var milli = now.getMilliseconds(),
                    sec = now.getSeconds(),
                    min = now.getMinutes(),
                    hou = now.getHours(),
                    mo = now.getMonth(),
                    dy = now.getDate(),
                    yr = now.getFullYear();
                  var months = ["January", "February", "March", "April", 
                                "May", "June", "July", "August", "September", 
                                "October", "November", "December"];
                  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
                    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
                  for (var i = 0; i < tags.length; i++)
                    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
                }

                    if (hou == 0) {
                            hou = 12;
                        }

                        if (hou > 12) {
                            hou = h - 12; }

                function initClock() {
                  updateClock();
                  window.setInterval("updateClock()", 100);
                }

                // END CLOCK SCRIPT
            </script>

Answer 1

您覆盖 hou 的值太晚了:当您到达代码的该部分时，您已经通过了将值写入 DOM 的 for 循环。只需向上移动即可解决问题:

// Overwrite hou if necessary
if (hou == 0) {
    hou = 12;
} else if (hou > 12) {
    hou -= 12;
}

// When done, write everything to DOM
var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
    for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

OP 要求实现 am/pm 检测。这就像在覆盖它之前检查 hou 是否为 <12 或 >=12 一样简单:

// Determine if it's ante/post-meridiem (am/pm)
var meridiem = hou < 12 ? 'am' : 'pm';
// Then write it to an element somewhere...

if (hou == 0) {
    hou = 12;
} else if (hou > 12) {
    hou -= 12;
}

查看概念验证:

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    yr = now.getFullYear();
  var months = ["January", "February", "March", "April",
    "May", "June", "July", "August", "September",
    "October", "November", "December"
  ];
  
  document.getElementById('meridiem').innerText = hou < 12 ? 'am' : 'pm';

  if (hou == 0) {
    hou = 12;
  } else if (hou > 12) {
    hou -= 12;
  }

  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
  for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

function initClock() {
  updateClock();
  window.setInterval("updateClock()", 100);
}

initClock();

<div id="timedate">
  <span id="mon">January</span>
  <span id="d">1</span>,
  <span id="y">0</span><br />
  <span id="h">12</span>:
  <span id="m">00</span>:
  <span id="s">00</span>
  <span id="mi">000</span>
  <span id="meridiem">am</span>
</div>