Javascript 日期按钮答案

【问题标题】：Javascript Date ButtonJavascript 日期按钮
【发布时间】：2016-11-16 18:26:07
【问题描述】：

我做错了什么？我已经尝试了各种不同的功能，但我仍然无法让它工作？我有什么遗漏吗？

<body>
  <button onclick="displayDate()">Click Here To See The Date</button>
</body>

function displayDate()
{
today = " ";
ampm = " ";
dayNum = getDate();
month = getMonth();
year = getFullYear();
minute = getMinutes();
hour = getHours();
day = getDay();

ampm (hour < 12) ? " a.m." : " p.m.";
hour = (hour > 12) ? hour - 12 : hour;
hour = (hour == 0) ? 12 : hour;
minute = (minute < 10) ? "0" + minute : minute;
greeting = (hour < 12) ? "Good Morning,";
greeting = (hour >= 12 && hour < 17) ? "Good Afternoon,";
greeting = (hour >= 17) ? "Good Evening,";
month = (month == 0) ? "January";
month = (month == 1) ? "February";
month = (month == 2) ? "March";
month = (month == 3) ? "April";
month = (month == 4) ? "May";
month = (month == 5) ? "June";
month = (month == 6) ? "July";
month = (month == 7) ? "August";
month = (month == 8) ? "September";
month = (month == 9) ? "October";
month = (month == 10) ? "November";
month = (month == 11) ? "December";
day = (day == 0) ? "Sunday";
day = (day == 1) ? "Monday";
day = (day == 2) ? "Tuesday";
day = (day == 3) ? "Wednesday";
day = (day == 4) ? "Thursday";
day = (day == 5) ? "Friday";
day = (day == 6) ? "Saturday";

today = greeting + " it is " + hour + ":" + minute + " " + ampm + " on " + month + " " + dayNum + ", " + year + ".";

return window.alert(today);
}

【问题讨论】：

您应该使用switch 语句，而不是每天和每月使用三元运算符。

标签： javascript date button display

【解决方案1】：

使用this tiny library，您可以简单地说"It is " + clock.what.time(now) + " on " + clock.what.month(now) + " " + clock.what.day(now) + ", " + clock.what.year(now) + "."

var btn = document.getElementById('btn');
var node = document.createElement("div");
node.id = "node";

btn.addEventListener("click", function(){
  var now = clock.now;
  node.innerHTML = '';
  var str = "It is " + clock.what.time(now)  + " on " + clock.what.month(now) + " " + clock.what.day(now) + ", " + clock.what.year(now)  + ".";
  var textnode = document.createTextNode(str);
  node.appendChild(textnode);
  document.body.appendChild(node);
});

#node{
  text-transform:capitalize;
}

<script src="https://rack.pub/clock.min.js"></script>
<button id="btn">Time</button>

【讨论】：

【解决方案2】：

你的 js 函数有几个错误。尝试类似

 function displayDate() {

     var MONTHS = {
         0: "January",
         1: "February",
         2: "March",
         3: "April",
         4: "May",
         5: "June",
         6: "July",
         7: "August",
         8: "September",
         9: "October",
         10: "November",
         11: "December"
     };

     var DAYS = {
         0: "Sunday",
         1: "Monday",
         2: "Tuesday",
         3: "Wednesday",
         4: "Thursday",
         5: "Friday",
         6: "Saturday",
     };

     var today = " ";
     var ampm = " ";
     var date = new Date();
     var dayNum = date.getDay();
     var month = date.getMonth();
     var year = date.getFullYear();
     var minute = date.getMinutes();
     var hour = date.getHours();
     var day = date.getDay();



     ampm = (hour < 12) ? " a.m." : " p.m.";
     hour = (hour > 12) ? hour - 12 : hour;
     hour = (hour == 0) ? 12 : hour;
     minute = (minute < 10) ? "0" + minute : minute;

     var greeting = (hour < 12) ? "Good Morning," : (hour >= 12 && hour < 17) ? "Good Evening," : (hour >= 17) ? "Good Evening," : "Good Evening,";

     today = greeting + " it is " + hour + ":" + minute + " " + ampm + " on " + MONTHS[month] + " " + DAYS[dayNum] + ", " + year + ".";

     return window.alert(today);

 }

【讨论】：

MONTHS 和 DAYS 可以是数组，考虑hour = hour %12 || 12。最后，由于您将小时设置为 12 小时时间，hour >= 17 永远不会为真，并且 12:00 am 将返回“晚安”。指出错误以及如何修复它们而不只是发布代码也更有帮助。

【解决方案3】：

你使用的每个三元都有一个错误greeting = (hour < 12) ? "Good Morning,";应该是greeting = (hour < 12) ? "Good Morning," : 'Good afternoon';

您还可以将代码粘贴到浏览器中的任何开发人员工具控制台中，以检查您的错误！

【讨论】：