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

时间:2018-06-19 09:13:46

标签: javascript jquery html css3

我的问题是关于我在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);
});
&#13;
<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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

使用("0"+hours%12).slice(-2)做两位数12小时格式并使用(小时/ 12 == 0)来获取上午/下午:

$(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>

答案 1 :(得分:0)

使用此方法。

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

然后你可以添加日,月和年。

答案 2 :(得分:0)

在将当前小时分配为小时var。

后添加以下代码
public void onCreate(Bundle arguments) {
    MultiDex.install(getTargetContext());
    super.onCreate(arguments);
}

将此行添加到html

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

更新代码 -

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

答案 3 :(得分:-1)

您可以手动执行此操作。

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

或布尔或其他...... 我希望,这很有用