CSS：どのスパンサイズで、それはデジタル時計のため

更新されるたびに変更しないで作る方法私は今のようなシンプルなデジタル時計を作っていますが、以下：CSS：どのスパンサイズで、それはデジタル時計のため

取り組んでいる

function displayTime(){ 
 
//get current time 
 
\t var currentTime = new Date(); 
 
\t var hours = currentTime.getHours(); 
 
\t var minutes = currentTime.getMinutes(); 
 
\t var seconds = currentTime.getSeconds(); 
 
\t var meridien = "AM"; 
 
//added 0 to front of hours, minutes and seconds for asthetic display 
 
if (seconds < 10){ 
 
\t \t seconds = "0" + seconds; 
 
} 
 

 
if (minutes < 10){ 
 
\t \t minutes = "0" + minutes; 
 
} 
 

 
if (hours < 10){ 
 
\t hours = "0" + hours; 
 
} 
 

 
// Display AM and PM Logic 
 
\t if (hours > 12){ 
 
\t \t meridien = "PM"; 
 
\t } else { 
 
\t \t meridien = "AM"; 
 
\t } 
 

 

 
var clockDis = document.getElementById("clock"); 
 
var meridienDis = document.getElementById("meridiem"); 
 
clockDis.textContent = hours + ":" + minutes + ":" + seconds ; 
 
meridienDis.textContent = meridien; 
 

 
} 
 
//refresh every seconds 
 
setInterval(displayTime, 1000); 
 
displayTime();

span{ 
 

 
\t font-size: 100px; 
 
\t text-align: center; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Clock </title> 
 

 
</head> 
 
<body> 
 
<div id="container"> 
 
<span id="clock"></span> 
 
<span id="meridiem"></span> 
 
</div> 
 
<script type="text/javascript" src="clock.js"></script> 
 
</body> 
 
</html>

しかし、秒とメリディエム（AM/PM）の間のエリアでは、メディディエムが左右にツイッチし、秒が更新されるたびに、審美的な問題はほとんど発生しません。どのようにすべてのスパンを幅に関して変化させないようにして、秒がリフレッシュされるたびにmeridiemが固定位置にとどまるようにします。もう一度、あなたの時間をありがとう。そのテキストの幅を変更することはありません別で一桁を置き換え、すべての文字が同じ幅を有している、等幅フォントで

font-family: monospace;

：

出典

2017-08-14 Alan Koh W.T

秒のドットをオン/オフしないようにすることはできますが、代わりに不透明度を変更することができます。それは間隔をそのまま保つべきです。 –

は等幅フォントを使用してください。例えば、上記のテキストはモノスペースのフォントで表示されます。

出典

2017-08-14 01:56:02 duskwuff

素晴らしいですが、すぐにこの行で問題を解決します。どうもありがとうございます！ –

#container span{ 
    font-size: 100px; 
    text-align: center; 
    display: inline-block; 
    width: 300px; //or whatever 
}

出典

2017-08-14 01:50:48

興味深い解決策ですが、今後の機能でクロックを更新し続けていると、実用的でない可能性がある幅の値を払って遊ぶ必要があります。しかし、それは今のところ問題を解決することができます。ありがとうございます。@ sharper –

CSS：どのスパンサイズで、それはデジタル時計のため

答えて

関連する問題