以 12 小时格式显示时间

Question

Hi The code below is giving me the current time but in 24ht format however I want to display time in 12 hr format and below is the code i am using. please suggest how can i do? I have tried many codes but not able to do.

                <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

You're overwriting the value of hou too late: when you arrive at that part of your code, you've already past the for loop where you write the value to the DOM. Simply move it upwards will fix the issue:

// 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 asks to implement the am/pm detection. This is as simple as simply checking if hou is <12 or >=12 before we overwrite it:

// 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;
}

See proof-of-concept:

 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>