我的数字时钟上缺少前导零答案

【问题标题】：Missing leading hour zero on my digital clock我的数字时钟上缺少前导零
【发布时间】：2020-03-20 20:10:48
【问题描述】：

如果小时小于 12，我尝试在小时前添加零，但它仅适用于分钟和秒。我还没有学过三元，所以我不能在我的代码中使用它作为一个选项。

在不使用三元组的情况下，我尝试了所有我能想到的方法。我什至不确定是否应该在一个函数中使用那么多 if 语句，我认为这就是它不起作用的原因。

let clock = document.getElementById("clock");
let color = document.getElementById("outermostDiv");

function clockTime() {
  let d = new Date();
  let h = d.getHours().toString();
  let m = d.getMinutes().toString();
  let s = d.getSeconds().toString();
  let AMorPM = document.getElementById("AMorPM");
    
    
  if(h.length < 2){
      h = "0" + h;
  };
  if(m.length < 2){
      m = "0" + m;
  };
  if(s.length < 2){
      s = "0" + s;
  };
  if (h == 0){
      h = 12;
  }; 
  if(h < 12){
      h = "0" + h;
      AMorPM.innerHTML = "AM";
  } else {
      AMorPM.innerHTML = "PM";
  };
  
  if(h > 12){
      h = h - 12;
  };
    
  document.getElementById("hours").innerText = h;
  document.getElementById("minutes").innerText = m;
  document.getElementById("seconds").innerText = s;
    
  setTimeout("clockTime()", 1000)
}
clockTime()

* {
	margin: 0;
    box-sizing:border-box;
}
body {
	font-family: 'Lato', Calibri;
    background-color: #cdcdcd;
    text-align: right;
}
#wrapper {
    min-width:1200px;
    margin-left: 15%;
    margin-right: 15%;
}
.outermostDiv {
    width:90%;
    
}
#clock {
    width:70%;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline;
    margin-top: 24vw;
    border-radius: .5vw;
}
#hours {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:6%;
    
}
#colon1 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#minutes {
    /*width:15%;*/
    height:15vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#colon2 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#seconds {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#AMorPM {
    /*width:15%;*/
    height:6vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:3vw;
    text-align: right;
    display:inline-block;
    margin-top: 4vw;
    margin-left:1%;
}

<DOCTYPE! html>
<html>
<head>
<title>Digital Clock - EST</title>
<link rel="stylesheet" type="text/css" href="digitalClock.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Architects+Daughter|Covered+By+Your+Grace|Gamja+Flower|Give+You+Glory|Mansalva|Mrs+Saint+Delafield|Nanum+Pen+Script|Poor+Story&display=swap" rel="stylesheet">
</head>
<body id="wrapper">
    
<div class="outermostDiv">
    
<div id="clock">
    
<div id="hours">

</div>
<div id="colon1">
:
</div>
<div id="minutes">
   
</div> 
<div id="colon2">
: 
</div>
<div id="seconds">

</div>
<div id="AMorPM">
  
</div><!--end of AM-->
</div><!--end of clock-->    
</div><!--end of outermostDiv-->

<script type="text/javascript" src="digitalClock.js"></script>
</body>
</html>

【问题讨论】：

你的隐式类型转换无处不在。您应该严格区分当前处理的是字符串还是数字。

标签： javascript

【解决方案1】：

您正在将 h 转换为字符串，但随后您将其用作整数，最终在某些情况下将其转换回来。将字符串转换和额外的“0”添加到字符串末尾，你会没事的。像这样。

let clock = document.getElementById("clock");
let color = document.getElementById("outermostDiv");

function clockTime() {
  let d = new Date();
  let h = d.getHours();
  let m = d.getMinutes().toString();
  let s = d.getSeconds().toString();
  let AMorPM = document.getElementById("AMorPM");
    
  if(m.length < 2){
      m = "0" + m;
  };
  if(s.length < 2){
      s = "0" + s;
  };
  if (h == 0){
      h = 12;
  }; 
  if(h < 12){
      AMorPM.innerHTML = "AM";
  } else {
      AMorPM.innerHTML = "PM";
  };
  
  if(h > 12){
      h = h - 12;
  };

  h = h.toString()
  if(h.length < 2){
      h = "0" + h;
  };
  
  document.getElementById("hours").innerText = h;
  document.getElementById("minutes").innerText = m;
  document.getElementById("seconds").innerText = s;
    
  setTimeout("clockTime()", 1000)
}
clockTime()

* {
	margin: 0;
    box-sizing:border-box;
}
body {
	font-family: 'Lato', Calibri;
    background-color: #cdcdcd;
    text-align: right;
}
#wrapper {
    min-width:1200px;
    margin-left: 15%;
    margin-right: 15%;
}
.outermostDiv {
    width:90%;
    
}
#clock {
    width:70%;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline;
    margin-top: 24vw;
    border-radius: .5vw;
}
#hours {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:6%;
    
}
#colon1 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#minutes {
    /*width:15%;*/
    height:15vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#colon2 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#seconds {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#AMorPM {
    /*width:15%;*/
    height:6vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:3vw;
    text-align: right;
    display:inline-block;
    margin-top: 4vw;
    margin-left:1%;
}

<DOCTYPE! html>
<html>
<head>
<title>Digital Clock - EST</title>
<link rel="stylesheet" type="text/css" href="digitalClock.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Architects+Daughter|Covered+By+Your+Grace|Gamja+Flower|Give+You+Glory|Mansalva|Mrs+Saint+Delafield|Nanum+Pen+Script|Poor+Story&display=swap" rel="stylesheet">
</head>
<body id="wrapper">
    
<div class="outermostDiv">
    
<div id="clock">
    
<div id="hours">

</div>
<div id="colon1">
:
</div>
<div id="minutes">
   
</div> 
<div id="colon2">
: 
</div>
<div id="seconds">

</div>
<div id="AMorPM">
  
</div><!--end of AM-->
</div><!--end of clock-->    
</div><!--end of outermostDiv-->

<script type="text/javascript" src="digitalClock.js"></script>
</body>
</html>

【讨论】：

我知道确实如此，但请参阅我的第二个答案。请注意，h-12 也是错误的。 am/pm 00 应该是 12 的打印机。

【解决方案2】：

您可能希望使用padStart 字符串方法将前导零添加到小时/分钟/秒，而不是手动执行：

let clock = document.getElementById("clock");
let color = document.getElementById("outermostDiv");

function clockTime() {
  let d = new Date();
  let h = d.getHours().toString();
  let m = d.getMinutes().toString();
  let s = d.getSeconds().toString();
  let AMorPM = document.getElementById("AMorPM");

  if (parseInt(h) == 0){
      h = 12;
  }; 

  if (h < 12) {
    AMorPM.innerHTML = "AM";
  } else {
    AMorPM.innerHTML = "PM";
  };

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

  const pad = value => value.toString().padStart(2, '0');

  document.getElementById("hours").innerText = pad(h);
  document.getElementById("minutes").innerText = pad(m);
  document.getElementById("seconds").innerText = pad(s);

  setTimeout("clockTime()", 1000)
}
clockTime()

【讨论】：

【解决方案3】：

请注意，尽管我最初的回答是，我真的会把它简化成这样的。编辑 - 将其加载到 sn-p 中并使其运行。

function clockTime() {
  let d = new Date();
  
  let h = d.getHours();
  h = (h>12 ? h-12 : (h!=0 ? h : 12)).toString().padStart(2, '0');
  let m = d.getMinutes().toString().padStart(2, '0');
  let s = d.getSeconds().toString().padStart(2, '0');
  let ampm = d.getHours()<12 ? "AM" : "PM";

  document.getElementById("AMorPM").innerText = ampm;
  document.getElementById("hours").innerText = h;
  document.getElementById("minutes").innerText = m;
  document.getElementById("seconds").innerText = s;

  setTimeout("clockTime()", 1000)
}
clockTime();

<span id="hours"></span>:
<span id="minutes"></span>:
<span id="seconds"></span>
<span id="AMorPM"></span>

【讨论】：

【解决方案4】：

已对您的 js 代码稍作修改，希望对您有用。

let clock = document.getElementById("clock");
let color = document.getElementById("outermostDiv");

function clockTime() {
  let d = new Date();
  let h = d.getHours().toString().padStart(2, '0');
  let m = d.getMinutes().toString().padStart(2, '0');
  let s = d.getSeconds().toString().padStart(2, '0');
  let AMorPM = document.getElementById("AMorPM");
    
  
  if (h == 0){
      h = 12;
      AMorPM.innerHTML = "AM";
  } 
  
  else if(h<12){
      AMorPM.innerHTML = "AM";
  }
  else{
  AMorPM.innerHTML = "PM";
  h = h - 12;
  h=h.toString().padStart(2, '0')
  
  }        
  document.getElementById("hours").innerText = h;
  document.getElementById("minutes").innerText = m;
  document.getElementById("seconds").innerText = s;
    
  setTimeout("clockTime()", 1000)
}
clockTime()

* {
	margin: 0;
    box-sizing:border-box;
}
body {
	font-family: 'Lato', Calibri;
    background-color: #cdcdcd;
    text-align: right;
}
#wrapper {
    min-width:1200px;
    margin-left: 15%;
    margin-right: 15%;
}
.outermostDiv {
    width:90%;
    
}
#clock {
    width:70%;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline;
    margin-top: 24vw;
    border-radius: .5vw;
}
#hours {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:6%;
    
}
#colon1 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#minutes {
    /*width:15%;*/
    height:15vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#colon2 {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: center;
    display:inline-block;
    margin-top:1vw;
    margin-left:1%;
}
#seconds {
    /*width:15%;*/
    height:14vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:10vw;
    text-align: right;
    display:inline-block;
    margin-top:2vw;
    margin-left:1%;
}
#AMorPM {
    /*width:15%;*/
    height:6vw;
    color:#fff;
    background-color:#000;
    float:left;
    overflow:auto;
    font-size:3vw;
    text-align: right;
    display:inline-block;
    margin-top: 4vw;
    margin-left:1%;
}

<DOCTYPE! html>
<html>
<head>
<title>Digital Clock - EST</title>
<link rel="stylesheet" type="text/css" href="digitalClock.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Architects+Daughter|Covered+By+Your+Grace|Gamja+Flower|Give+You+Glory|Mansalva|Mrs+Saint+Delafield|Nanum+Pen+Script|Poor+Story&display=swap" rel="stylesheet">
</head>
<body id="wrapper">
    
<div class="outermostDiv">
    
<div id="clock">
    
<div id="hours">

</div>
<div id="colon1">
:
</div>
<div id="minutes">
   
</div> 
<div id="colon2">
: 
</div>
<div id="seconds">

</div>
<div id="AMorPM">
  
</div><!--end of AM-->
</div><!--end of clock-->    
</div><!--end of outermostDiv-->

<script type="text/javascript" src="digitalClock.js"></script>
</body>
</html>

【讨论】：