私のデジタル時計で先導するゼロ

Question

こんにちは私はデジタル時計を構築しています。先進のゼロを追加することでより綺麗に見えるようにしたいのですが、私にはチップを与えることができる誰かの仕事をするようです。

私がしようとしている場合（時間< 10）{時間= "0" +時間;}

しかし、それdidntの仕事私のHTMLはこの

<div id="myClock"> 
    <div id="period"> 
    <span id="year"></span> 
     <span id="month"></span> 
     <span id="date"></span> 
     <span id="day"></span> 
    </div> 
    <div id="time"> 
     <span id="hour"></span> 
     <span id="minute"></span> 
     <span id="second"></span> 
    </div> 
</div> 
<br> 
<form> 
    <input type="date" class="unstyled"> 
    <input type="time"> 
</form> 
<div id="alarmBox"> 
    <div class="box"> 
     <h1>alarm</h1> 
    </div> 
</div> 

Answer 1

のように見えます

const DATE = new Date(); 
var monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
var dayNames = ["Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday", "Sunday"]; 
console.log(DATE); 

document.getElementById('year').innerHTML = DATE.getFullYear(); 
document.getElementById('month').innerHTML = monthNames[DATE.getMonth()]; 
document.getElementById('date').innerHTML = DATE.getDate(); 
document.getElementById('day').innerHTML = dayNames[DATE.getDay() - 1]; 

var hour = document.getElementById('hour').innerHTML = DATE.getHours(); 
var min = document.getElementById('minute').innerHTML = DATE.getMinutes(); 
var sec = document.getElementById('second').innerHTML = DATE.getSeconds(); 

var theTime = document.getElementById('time').innerHTML = hour + " : " + min + " : " + sec; 

私は以下のコードがあなたの解決策として機能すると思います。 hourとminという変数は、両方の変数で同じ問題が発生するため、埋められました。

変数を設定するために呼び出す関数Dateの戻り値の型はnumberです。あなたのコードは数字に0を加えていましたが、基本的に何もしません。文字列を連結したいので、変数が最初にstringであることを確認してください。

const DATE = new Date(); 
 
var monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var dayNames = ["Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday", "Sunday"]; 
 
console.log(DATE); 
 

 
document.getElementById('year').innerHTML = DATE.getFullYear(); 
 
document.getElementById('month').innerHTML = monthNames[DATE.getMonth()]; 
 
document.getElementById('date').innerHTML = DATE.getDate(); 
 
document.getElementById('day').innerHTML = dayNames[DATE.getDay() - 1]; 
 

 
var hour = document.getElementById('hour').innerHTML = DATE.getHours(); 
 
var min = document.getElementById('minute').innerHTML = DATE.getMinutes(); 
 
var sec = document.getElementById('second').innerHTML = DATE.getSeconds(); 
 

 
//change the vars types to string and check if it's 1 or 2 digits 
 
hour = hour.toString() 
 
if (hour.length < 2) { 
 
    //prepend a 0 to the string to pad if necessary 
 
    hour = '0' + hour; 
 
} 
 
min = min.toString() 
 
if (min.length < 2) { 
 
    //prepend a 0 to the string to pad if necessary 
 
    min = '0' + min; 
 
} 
 

 
var theTime = document.getElementById('time').innerHTML = hour + " : " + min + " : " + sec;

<div id="myClock"> 
 
    <div id="period"> 
 
    <span id="year"></span> 
 
    <span id="month"></span> 
 
    <span id="date"></span> 
 
    <span id="day"></span> 
 
    </div> 
 
    <div id="time"> 
 
    <span id="hour"></span> 
 
    <span id="minute"></span> 
 
    <span id="second"></span> 
 
    </div> 
 
</div> 
 
<br> 
 
<form> 
 
    <input type="date" class="unstyled"> 
 
    <input type="time"> 
 
</form> 
 
<div id="alarmBox"> 
 
    <div class="box"> 
 
    <h1>alarm</h1> 
 
    </div> 
 
</div>