我正在尝试用HTML、CSS和JavaScript构建一个数字时钟。我做了一个可以在12小时和24小时制之间切换的按钮。我被如何实现这一点的逻辑所困扰。
function displayTime(){
let d = new Date()
let hour = d.getHours()
let minute = d.getMinutes()
let second = d.getSeconds()
let amOrPm = "AM"
let clockSystem = document.getElementById("24hr-btn")
// Indicates whether its AM or PM
if (hour >= 12){
amOrPm = "PM"
}
// Toggle Clock System
function clockSystemTime(){
// sets the clock to the 12hr system clock
if (hour > 12) {
hour -= 12
} else {
hour += 12
}
}
if (hour < 0){
hour = "0" + hour
}
if (minute < 10){
minute = "0" + minute
}
if (second < 10){
second = "0" + second
}
document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second + " " + amOrPm;
}
setInterval(displayTime, 1000)第一个月
2条答案
按热度按时间mbyulnm01#
如果使用
IntlAPI，则会简单得多，而且不太容易出错。Reference
这提供了一个12小时时钟：
这提供了24小时时钟：
因此：
一个二个一个一个
yquaqz182#
也许您可以在这里找到答案？How do you display JavaScript datetime in 12 hour AM/PM format?
如果不是，那么逻辑如下：
Date返回一个24小时的日期，因此，获取小时数将是我们在转换时间时面临的唯一问题。如果小时数大于12，则从小时数中减去12，并将时钟设置为PM。如果不是，则只获取小时数。分钟和秒等其他内容应保持不变。
至于按钮，只要让它在用户点击时，它将改变一个JS变量，该变量包含你正在做的是12小时还是24小时记数法。如果是12，运行我上面描述的逻辑。如果是24，只接受对象给你的东西。