gpt4 book ai didi

javascript - CSS:每次为数字时钟刷新时,如何使跨度的大小不变

转载 作者:行者123 更新时间:2023-11-28 03:11:56 35 4
gpt4 key购买 nike

我现在正在制作一个简单的数字时钟,如下所示:

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

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

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

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


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{

font-size: 100px;
text-align: center;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<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;

在等宽字体中,每个字符的宽度都相同,因此用一个数字替换另一个数字不会改变文本的宽度。 (例如,上面的文本是等宽字体。)

关于javascript - CSS:每次为数字时钟刷新时,如何使跨度的大小不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45666457/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com