Question

尝试一下。现在是4:11 PM，但我的输出显示为'早安'

$(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>

如何使用12小时格式的javascript显示早晚/下午/晚上

3 个答案: