[英]Display 12-hour and 24-hour time
我想制作一個顯示當前時間的網頁。 單擊“12 小時格式”按鈕時，div 區域將顯示 12 小時制的時間。 單擊“24 小時格式”按鈕時，時間將在 div 區域顯示為 24 小時制。 當前單擊這些按鈕時沒有任何反應。 幫助！
HTML：
<html>
<head>
<title>Clock</title>
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
<div id="textbox"></div>
<br/>
<button type="radio" onclick="getTwelveHrs()">12 Hour Format</button>
<button type="radio" onclick="getTwentyFourHrs()">24 Hour Format</button>
</body>
</html>
JavaScript：
function getTwelveHours{
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
startTime();
function getTwentyFourHrs() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
為什么不使用像 Moment.js 這樣的庫來為你做這件事。
H, HH 24 hour time
h, or hh 12 hour time (use in conjunction with a or A)
所以在使用 moment.js 時只需在 JavaScript 中使用此代碼
moment() 方法以您的特定格式返回當前日期。 因此，當您用戶單擊按鈕時，您可以在每個按鈕上調用以下方法
moment().format("YYYY-MM-DD HH:mm"); // 24H clock
moment().format("YYYY-MM-DD hh:mm"); // 12H clock
沒有測試過這個，但它應該可以工作
12 小時格式可以通過使用moment js 來獲取，這是一個很好的執行時間和日期操作的庫。
moment().format('YYYY-MM-DD, hh:mm:ss A')
where Post 或 ante meridiem （注意只有一個字符 ap 也被認為是有效的）
Moment Js 的鏈接：-
同意其他人的意見，是的，該代碼存在問題，但對於時間轉換部分 - 也許您可以使用 JavaScript 內置函數執行這樣的簡單操作：
對於 12 小時格式：
let formattedTime = new Date().toLocaleTimeString('en-US'); console.log(formattedTime)
對於 24 小時格式：
let currentDateTime = new Date(); let formattedTime = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() +":" + currentDateTime.getSeconds(); console.log(formattedTime)
const time = new Date().getHours('en-US',{hour12:false});
const time = new Date().getHours('en-US',{hour12:true});
老實說，我不完全確定您是如何努力實現這一目標的，但我想我理解您想要發生的事情。
試試這個：
window.onload = function() {
var h, m, s;
document.getElementById('twelveHrs').style.display = 'none';
document.getElementById('twentyFourHrs').style.display = 'none';
getTwelveHrs();
getTwentyFourHrs();
function getTwelveHrs() {
var tag = 'AM';
checkTime();
if(h > 12) {
h -= 12
tag = 'PM';
}
document.getElementById('twelveHrs').innerHTML = h + ':' + m + ':' + s + ' ' + tag;
t = setTimeout(function() {
getTwelveHrs()
}, 1000);
}
function getTwentyFourHrs() {
checkTime();
document.getElementById('twentyFourHrs').innerHTML = h + ':' + m + ':' + s;
var t = setTimeout(function() {
getTwentyFourHrs()
}, 1000);
}
function checkTime() {
var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
if(h < 10)
h = '0' + h;
if(m < 10)
m = '0' + m;
if(s < 10)
s = '0' + s;
return h, m, s;
}
}
function displayTwelveHrs() {
document.getElementById('twentyFourHrs').style.display = 'none';
document.getElementById('twelveHrs').style.display = '';
}
function displayTwentyFourHrs() {
document.getElementById('twelveHrs').style.display = 'none';
document.getElementById('twentyFourHrs').style.display = '';
}
然后將您的 HTML 替換為：
<div id="twelveHrs"></div>
<div id="twentyFourHrs"></div>
<br />
<button type="radio" onclick="displayTwelveHrs()">12 Hour Format</button>
<button type="radio" onclick="displayTwentyFourHrs()">24 Hour Format</button>
基本上，當頁面加載時，它會啟動時鍾並隱藏相應的div標簽。 然后你點擊一個按鈕，它會顯示你想要的div ，同時隱藏另一個。
可以在以下位置找到工作的 JSFiddle： http : //jsfiddle.net/fp3Luwzc/
由於工作截止日期即將到來，而且現在真的快到了，我決定回答這個 5 年前的問題。
大多數人推薦使用 Moment.js 庫，這真的很好，因為在大多數情況下，重新發明輪子是沒有意義的，相信每周有 9,897,199 次 npm 下載的庫無疑是一個明智的選擇。
但是，由於基於 OP 代碼提供解決方案的唯一答案似乎存在一些錯誤； 我虛心提出我的解決方案：
const FORMATS = { TwelveHours: 12, TwentyFourHours: 24 } class Clock { format = FORMATS.TwentyFourHours; constructor(clockDivId) { this.clockDivId = clockDivId; this.clockInterval = setInterval(() => { document.getElementById(clockDivId).innerHTML = this.getCurrentTime().format(this.format); }, 500) } getCurrentTime() { let today = new Date(); return new Time(today.getHours(), today.getMinutes(), today.getSeconds()); } switchTo12HourFormat() { this.format = FORMATS.TwelveHours } switchTo24HourFormat() { this.format = FORMATS.TwentyFourHours } destroy() { clearInterval(this.clockInterval); } } class Time { constructor(hours, minutes, seconds) { this.hours = hours; this.minutes = minutes; this.seconds = seconds; } format(type) { switch (type) { case FORMATS.TwentyFourHours: { return this.print(this.hours) } case FORMATS.TwelveHours: { let tag = this.hours >= 12 ? 'pm' : 'a.m'; let hours = this.hours % 12; if (hours == 0) { hours = 12; } return this.print(hours) + ' ' + tag; } } } //private to2Digits(number) { return number < 10 ? '0' + number : '' + number; } print(hours) { return this.to2Digits(hours) + ':' + this.to2Digits(this.minutes) + ':' + this.to2Digits(this.seconds); } } let clock = new Clock("clock");
<html> <head> <title>Clock</title> </head> <body> <div id="clock"></div> <br/> <button onclick="clock.switchTo12HourFormat()">12 Hour Format</button> <button onclick="clock.switchTo24HourFormat();">24 Hour Format</button> </body> </html>
哦不，哦不！ 我已經寫了“print”而不是“this.print”，我已經在谷歌瀏覽器中運行了它。
基本上 UI 被打印對話框擋住了，我已經丟失了所有代碼，不得不重新編寫它，現在我要回家睡覺，也許，也許是一集 HIMYM。
Javascript：將 24 小時時間字符串轉換為帶有 AM/PM 且無時區的 12 小時時間
[英]Javascript: convert 24-hour time-of-day string to 12-hour time with AM/PM and no timezone
Javascript -- 檢測用戶的區域設置是否設置為使用 12 小時或 24 小時時間格式
[英]Javascript -- Detect if user's locale are set to use 12-hour or 24-hour time format
JavaScript 確定瀏覽器是否使用 12 小時或 24 小時格式顯示時間輸入
[英]JavaScript to determine if browser is displaying the time input using a 12-hour or 24-hour format
根據 toLocaleTimeString() 將 12 小時 hh:mm AM/PM 轉換為 24 小時 hh:mm
[英]convert 12-hour hh:mm AM/PM to 24-hour hh:mm depending on toLocaleTimeString()
使用 javascript 檢測用戶的區域設置是否設置為 12 小時或 24 小時時間格式
[英]Detect if user's locale is set to 12-hour or 24-hour timeformat using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.