如何将 24 小时格式更改为 12 小时？

Question

我的问题是关于我使用下面的代码以 24 小时格式显示日期和时间，但在这里我需要将格式更改为 12 小时。 请帮我解决问题。

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html((hours < 10 ? "0" : "") + hours);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
  </ul>
</div>

Answer 1

使用("0"+hours%12).slice(-2) 进行两位数的 12 小时格式并使用 (hours/12 == 0) 来获取 AM/PM：

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(("0"+hours%12).slice(-2) + " " + ((hours/12 == 0)?"AM":"PM"));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
  </ul>
</div>

Answer 2

使用这个方法。

function ampmFormat(date) {
     var hours = date.getHours();
     var minutes = date.getMinutes();
     var ampm = hours >= 12 ? 'pm' : 'am';
     hours = hours % 12;
     hours = hours ? hours : 12; 
     minutes = minutes < 10 ? '0'+minutes : minutes;
     var strTime = hours + ':' + minutes + ' ' + ampm;
     return strTime;
  }

然后你可以用这个添加日、月和年。

Answer 3

在将当前小时分配给小时变量后添加以下代码。

var timing = hours >= 12 ? 'PM' : 'AM';
hours %= 12;      
if(hours == 0)
hours = 12;          
$("#ampm").html(timing);

在 html 中加入这一行

<li id="ampm"></li>

更新代码 -

$(document).ready(function() {
  // Making 2 variable month and day
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

  // make single object
  var newDate = new Date();
  // make current time
  newDate.setDate(newDate.getDate());
  // setting date and time
  $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

  setInterval(function() {
    // Create a newDate() object and extract the seconds of the current time on the visitor's
    var seconds = new Date().getSeconds();
    // Add a leading zero to seconds value
    $("#sec").html((seconds < 10 ? "0" : "") + seconds);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the minutes of the current time on the visitor's
    var minutes = new Date().getMinutes();
    // Add a leading zero to the minutes value
    $("#min").html((minutes < 10 ? "0" : "") + minutes);
  }, 1000);

  setInterval(function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    var timing = hours >= 12 ? 'PM' : 'AM';
    hours %= 12;      
    if(hours == 0)
      hours = 12;          
    $("#ampm").html(timing);            
    // Add a leading zero to the hours value
    $("#hours").html((hours < 10 ? "0" : "") + hours);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
  <div id="Date"></div>

  <ul>
    <li id="hours"></li>
    <li id="point">:</li>
    <li id="min"></li>
    <li id="point">:</li>
    <li id="sec"></li>
    <li id="ampm"></li>
  </ul>
</div>

Answer 4

您可以手动执行此操作。

If ( hours > 12){
    hours = hours % 12;
}
else{
    hours = hours;
}

你也可以添加一个字符串来搭配，

var ampm = am;
If ( hours > 12){
    hours = hours % 12;
    ampm = pm;
}
else{
    hours = hours;
    ampm = am;
}

或者一个布尔值或其他什么...... 希望对你有用