javascript - 使用 javascript 和 html 显示月份、日期和年份

Question

除了时间之外，我还需要显示月份、日期和年份。

我试图为月、日和年创建变量，然后按 ID 获取元素。我如何尝试这样做的示例：

var d = date.getDay();
var mn = date.getmonth();
var y = date.getFullYear();

编辑：这是我当前的代码。我也必须有一个时钟，但我已经成功地对其进行了编码。

function showTime(){
    var date = new Date();
    var h = date.getHours(); 
    var m = date.getMinutes(); 
    var s = date.getSeconds();
    var session = "AM";

    if(h == 0){
        h = 12;
    }

    if(h > 12){
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;

    setTimeout(showTime, 1000);

}

showTime();

<div id="MyClockDisplay" class="clock"></div>

<div id="Month"></div>
<div id="Day"></div>
<div id="Years"></div>

标签： javascripthtmldate

Answer 1

如果您遵循与构建时钟相同的模式来构建日期，那么您就走在了正确的轨道上，但是您误解了一些 JavaScript 日期方法。getDay()返回星期几的数值（0 代表星期日等），因此您需要使用它getDate()来返回月份中的日期。另外，请注意getMonth()返回从 0 开始的月份索引，因此您必须在显示日期时进行调整。

您可以用更少的代码完成同样的事情，但下面的示例遵循您的模式，希望您更容易遵循。

function showTime() {
  var timediv = document.getElementById("myClockDisplay");
  var datediv = document.getElementById("myDateDisplay");
  var dt = new Date();
  var d = dt.getDate();
  var m = dt.getMonth() + 1; // getMonth() returns the month "index" starting with 0 for Jan
  var y = dt.getFullYear();
  var hh = dt.getHours();
  var mm = dt.getMinutes();
  var ss = dt.getSeconds();
  var session = "AM";
  if (hh == 0) {
    hh = 12;
  }

  if (hh > 12) {
    hh = hh - 12;
    session = "PM";
  }

  d = (d < 10) ? "0" + d : d;
  m = (m < 10) ? "0" + m : m;
  hh = (hh < 10) ? "0" + hh : hh;
  mm = (mm < 10) ? "0" + mm : mm;
  ss = (ss < 10) ? "0" + ss : ss;
  timediv.textContent = hh + ":" + mm + ":" + ss + " " + session;
  datediv.textContent = m + "/" + d + "/" + y;
  setTimeout(showTime, 1000);
}

showTime();

<div id="myClockDisplay" class="clock"></div>
<div id="myDateDisplay"></div>