为什么我的时间在提交时没有显示正确的输出？

Question

我正在使用以下代码。一切都很好，但是当我发送信息时，它以 24 小时格式发送。我该如何解决这个问题？现在显示 13:00 我想显示 1:00 PM.

  <!DOCTYPE html>
  <html>
<head>
  <title>Page Title</title>
</head>
<body>
  <input type="time" value=""  id="a_time">
  <input type="button" onclick="gettime();" value="Click Here">
  <script type="text/javascript">
    function gettime(){
      alert(document.getElementById("a_time").value);
    }
  </script>
</body>
  </html>

Answer 1

试试这个，

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<input type="time" value=""  id="a_time">
<input type="button" onclick="gettime();" value="Click Here">
<script type="text/javascript">
function gettime(){
    var v = document.getElementById("a_time").value;
    var r = tConvert (v);
    alert(r);
}


function tConvert (time) {

      time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
    
      if (time.length > 1) {
        time = time.slice (1); 
        time[5] = +time[0] < 12 ? 'AM' : 'PM'; 
        time[0] = +time[0] % 12 || 12; 
      }
      return time.join (''); 
}
</script>
</body>
</html>

Answer 2

这就是你应该得到的。

回答这个问题，所谓的24 hour format就是它想申请的，官方命名为valid time string，你可以在HTML 5.2:2 section中看到

Answer 3

这是上一个答案的替代方法，它使用模板文字字符串，使事情更简洁、更容易理解。

思路是首先需要自己获取时间的小时部分，然后转化为整数。接下来，您需要编写逻辑来检查该数字是否大于 12，以检查它是否是下午（并检查数字是午夜 0 或中午 12 时的极端情况） .如果是午夜或中午，return 12。过去 12，取余数 mod 12。否则 return 按原样计算。按原样附上会议记录，然后添加上午或下午：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="time" value=""  id="a_time">
<input type="button" onclick="gettime();" value="Click Here">
<script type="text/javascript">
  function formatTime(timeStr) {
      const hours = timeStr.substring(0, 2);
      const mins = timeStr.substring(3, 5);
    
      const isTwelve = parseInt(hours) === 0 || parseInt(hours) === 12;
      const isPM = parseInt(hours) >= 12;

      return `${isTwelve ? "12" : isPM ? `0${parseInt(hours) % 12}` : hours}:${mins} ${isPM ? "PM" : "AM"}`
  }
  function gettime(){
      const formattedTime = formatTime(document.getElementById("a_time").value);
      alert(formattedTime);
  }
</script>
</body>
</html>

为什么我的时间在提交时没有显示正确的输出？

Why my time is not showing correct output when submitting?

html

javascript

html-input

typescript

这就是你应该得到的。