如何根据 Moment.js 的日期显示不同的消息？答案

【问题标题】：How do I display a different message depending on what day it is with Moment.js?如何根据 Moment.js 的日期显示不同的消息？
【发布时间】：2016-11-09 17:35:18
【问题描述】：

我正在使用Moment.js 尝试显示不同的消息，具体取决于今天是哪一天。

例如，如果是：

星期一我希望它说“今天是星期一！”
星期二我想说“星期二快乐！”

等等……

到目前为止，我有这个调用：moment().format('dddd') 我知道它可以完美地显示星期几，但我不知道如何显示不同的消息取决于星期几。

感谢您提前抽出时间对此进行调查。

奥利

【问题讨论】：

使用这个：stackoverflow.com/questions/31183558/…

标签： javascript html css momentjs

【解决方案1】：

即使没有 moment.js，也很容易确定当前日期：

console.log("Happy " + ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"][new Date().getUTCDay()-1])

下面是一个更高级的例子：

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var day = new Date().getUTCDay() - 1;

function getMessageOfTheDay() {
  switch (day) {
    case 0:
      return "Moody " + days[day];
      break;
    case 1:
      return "Trippy " + days[day];
      break;
    case 2:
      return "Weeping " + days[day];
      break;
    case 3:
      return "Thundering " + days[day];
      break;
    case 4:
      return "Freaky " + days[day];
      break;
    case 5:
      return "Salty " + days[day];
      break;
    case 6:
      return "Super " + days[day];
      break;
    default:
      return "Happy " + days[day];
  }
}

var classes = document.getElementById("messageOfTheDay").getAttribute('class').split(' ');
classes.push('day-' + days[day].toLowerCase());
document.getElementById("messageOfTheDay").setAttribute('class', classes.join(' '))
document.getElementById("messageOfTheDay").innerHTML = getMessageOfTheDay();

console.log("Below is the HTML code for or `h1`. Notice the added day-{DAY-OF-WEEK}");
console.log(document.getElementById("messageOfTheDay"));

&lt;h1 id="messageOfTheDay" class="hello world"&gt;&lt;/h1&gt;

刚刚将上面的 sn-p 更新为一个返回字符串的函数。知道您可以轻松地选择alert、console.log 或将其插入到您的页面中，就像我在上面所做的那样。

【讨论】：

谢谢！因此，如果在星期一和星期二有不同的消息，我会这样做：console.log("Happy " + ["Monday"][new Date().getUTCDay()-1]) console.log("It's " + ["星期二"][新日期().getUTCDay()-1])
我如何在 html 中显示控制台日志输出并给它一个类？
您希望班级每天都在变化吗？我上面的示例只是将消息传递给其他静态元素。
我希望有更多的控制权。
刚刚做了一个更新，显示如何插入一个类

【解决方案2】：

我建议使用开关盒：

var msg = '';

switch (moment().format('dddd')) {
                case 'Monday':
                    {
                        msg = 'It\'s Monday!';
                        break;
                    }
                case 'Tuesday':
                    {
                        msg = 'Happy Tuesday!';
                        break;
                    }
                    // etc...
            }

document.getElementById('message').innerHTML = msg;

&lt;div id='message'&gt;&lt;/div&gt;

【讨论】：

不错！然后我将如何在 div 中显示输出（并给它一个类）？
你使用的是纯javascript还是AngularJS？
谢谢！你能把它放在一个jsfiddle吗？

【解决方案3】：

试试类似的方法

if(moment().format('dddd') == "Monday")
    //do something
if(moment().format('dddd') == "Tuesday")
    //do something else

【讨论】：

我会在 if 语句之后放置什么以在 div 中显示消息？
document.getElementById("div_id").innerHTML = "hello world"
是的，这就是我想要的。返回很多代码并且有很多重复。能彻底清理干净吗？

【解决方案4】：

这是一个示例。然后你可以使用myMessage 来满足你的需要

var myMessage = '';
switch(moment().format('dddd')){
    case 'Monday':
        myMessage = "It's Monday !";
        break;
    case 'Tuesday':
        myMessage = "Happy Tuesday !";
        break;
    case ...
}

【讨论】：