如何使用javascript以12小時格式顯示早晨/下午/晚上

Question

It is 4:11PM here now but my output is shown as 'Good Morning' - why is this happening?

 $(document).ready(function() { function dateTime() { var ndate = new Date(); var h = ndate.getHours() % 12; var format = h >= 12? 'PM': 'AM'; var m = ndate.getMinutes().toString(); var s = ndate.getSeconds().toString(); if (h < 12) { h = "0" + h; $("h3.day-message").html("Good Morning"); } else if (h < 18) { $("h3.day-message").html("Good Afternoon"); } else { $("h3.day-message").html("Good Evening"); } if (s < 10) { s = "0" + s; } if (m < 10) { m = "0" + m; } $('.date').html(h + ":" + m + ":" + s + format); } setInterval(dateTime, 1000); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="day-message"></h3> <span class="date"></span>

Answer 1

您正在計算模式，因此h永遠不會大於12

所以，代替

var h = ndate.getHours() % 12;

用它

var h = ndate.getHours();

說明：模運算符（％）將總小時數除以12，然后返回余數。 例如，如果當前時間是下午4點，我將是16個小時，那么它將返回4

Answer 2

問題是因為您正在使用模運算符。 這意味着您的h > 12支票將永遠不會被擊中，因為除法的余數不能大於12 。 因此，您的邏輯始終認為今天仍然是早晨。 要解決此問題，在比較小時數時只需使用簡單的<檢查。

另請注意，日期格式存在一些問題，例如附加額外的零，因此最終以011作為小時值。 您可以使用slice()解決此問題。

話雖如此，請嘗試以下操作：

 $(document).ready(function() { function dateTime() { var ndate = new Date(); var hours = ndate.getHours(); var message = hours < 12 ? 'Good Morning' : hours < 18 ? 'Good Afternoon' : 'Good Evening'; $("h3.day-message").text(message); $('.date').html(hours.leadingZeroes(2) + ":" + ndate.getMinutes().leadingZeroes(2) + ":" + ndate.getSeconds().leadingZeroes(2) + (hours < 12 ? 'AM' : 'PM')); } setInterval(dateTime, 1000); }); Number.prototype.leadingZeroes = function(len) { return (new Array(len).fill('0', 0).join('') + this).slice(-Math.abs(len)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="day-message"></h3> <span class="date"></span> 

Answer 3

 $(document).ready(function() { function dateTime() { var format=""; var ndate = new Date(); var hr = ndate.getHours(); var h = hr % 12; if (hr < 12) { greet = 'Good Morning'; format='AM'; } else if (hr >= 12 && hr <= 17) { greet = 'Good Afternoon'; format='PM'; } else if (hr >= 17 && hr <= 24) greet = 'Good Evening'; var m = ndate.getMinutes().toString(); var s = ndate.getSeconds().toString(); if (h < 12) { h = "0" + h; $("h3.day-message").html(greet); } else if (h < 18) { $("h3.day-message").html(greet); } else { $("h3.day-message").html(greet); } if (s < 10) { s = "0" + s; } if (m < 10) { m = "0" + m; } $('.date').html(h + ":" + m + ":" + s + format); } setInterval(dateTime, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="day-message"></h3> <span class="date"></span> 

Answer 4

不帶 jQuery

 const messages = [ { ampm: "am", "greet": 'Good Morning' }, { ampm: "pm", "greet": 'Good Afternoon' }, { ampm: "pm", "greet": 'Good Evening' } ]; window.addEventListener("DOMContentLoaded", () => { const dateSpan = document.getElementById("date"); const message = document.getElementById("day-message"); const dateTime = () => { let now = new Date(), hour = now.getHours(), hh = hour % 12, // (hour % 12).toString().padStart(2,"0") if you want leading 0 mm = now.getMinutes().toString().padStart(2,"0"), ss = now.getSeconds(), period = 0; if (hour < 12) period = 0; else if (hour >= 12 && hour < 17) period = 1; else if (hour >= 17 && hour <= 24) period = 2; message.textContent = messages[period].greet; dateSpan.textContent = `${hh}:${mm}${messages[period].ampm}`; }; setInterval(dateTime, 500); });

 <h3 id="day-message"></h3> <span id="date"></span>

Answer 5

Display Good Morning/Afternoon/Evening using javascript in 12hours format

const displayGreeting =()=>{

const myDate = new Date();
const hrs = myDate.getHours();
let greet;

if (hrs < 12)
    greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
    greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
    greet = 'Good Evening';
    return  greet

}