Question

如何在javascript中根据当天的时间显示问候语？

var greetdate=new Date()
var hours=greetdate.getHours()

document.write('<h2>Hello! Good Morning! Have a nice day.</h2>')

document.write('<h2>Good Noon Visitor! </h2>')

//MESSAGE FOR AFTERNOON
document.write('<h2>Good Afternoon! </h2>')

//MESSAGE FOR EVENING (6pm-8pm)
document.write('<h2>Good Evening! </h2>')

//MESSAGE FOR NIGHT (9pm-11pm)
document.write('<h2>Good Night! </h2>')

//MESSAGE FOR LATE NIGHT (12pm-4am)
document.write('<h2>Wow! You`re still awake. Working Late?</h2>')

Answer 1

交换机的良好用例：

var h=(new Date()).getHours();
switch(true){
case h<13 :
  document.write('<h2>Hello! Good Morning! Have a nice day.</h2>');
break;
case h<=14 :
    document.write('<h2>Good Noon Visitor! </h2>')
break;
case h<18 :
    document.write('<h2>Good Afternoon! </h2>')
break;
case h<21 :
    document.write('<h2>Good Evening! </h2>')
break;
case h<24 :
    document.write('<h2>Good Night! </h2>');
break;
}

所有输出：http://jsbin.com/fesulamaga/edit?output

Answer 2

＆＃13;

var now = new Date();
var hours = now.getHours();

var greetings = [
   {"tod": "latenight",
    "greet": "Wow! You`re still awake. Working Late?",
    "test": hours >= 24 || hours <= 4
  },
  {"tod":"night",
    "greet": "Good Night!",
    "test": hours >= 21 || hours <= 11
  },
  {"tod":"evening",
    "greet": "Good Evening!",
    "test": hours >= 18 && hours <= 20
  },
  {"tod":"afternoon",
    "greet": "Good Afternoon!",
    "test": hours >= 13 && hours <= 17
  },
  {"tod":"noon",
    "greet": "Good Noon Visitor!",
    "test": hours == 12
  },
  {"tod":"morning",
    "greet": "Hello! Good Morning! Have a nice day.",
    "test": hours >= 5 && hours <= 11
  }
];

var message = document.getElementById("message");
message.innerHTML = greetings.find(el=>el.test).greet;
message.className = greetings.find(el=>el.test).tod;

＆＃13;

h2.latenight {
  color: purple;
  background: #ccf;
}

h2.night {
  color: silver;
  background: #000;
}

h2.evening {
  color: navy;
  background: #eee;
}

h2.afternoon {
  color: red;
  background: #ffdede;
}

h2.noon {
  color: cyan;
  background: goldenrod;
}

h2.morning {
  color: blue;
  background: #ffe;
}

＆＃13;

<div>
  <h2 id="message" class="bla"></h2>
</div>

＆＃13;

代码避免使用 document.write ，这通常被认为是一种不好的做法（参见讨论here）。该脚本根据一天中的时间设置一对H2标签的内容及其样式。既然代码是自我记录的，那么任何评论都会让它变得整洁。请注意，对象根据时间（＆＃34; tod＆＃34;）属性的值按降序排列，以确保准确测试。

数组将其find方法应用于其每个元素，直到出现真实结果。 find（）的回调由arrow function组成，它返回对象的test属性的结果。如果为true，则find（）依次返回该元素，从而便于设置内容。这种技术也有助于H2标签的造型。

Answer 3

function writeWelcomeMessage() {
    var d = new Date();
    var h = d.getHours();

    if(h < 12) {
        document.write('<h2>Hello! Good Morning! Have a nice day.</h2>')
    } else if(h < 18) {
        document.write('<h2>Hello! Good Day.</h2>')
    }
    // etc
}

Answer 4

var greetdate=new Date()
var hours=greetdate.getHours()
 
if (hours>=5&&hours<=11) 
//MESSAGE FOR MORNING
document.write('<h2>Hello! Good Morning! Have a nice day.</h2>')
else if (hours==12) 
//MESSAGE FOR NOON
document.write('<h2>Good Noon Visitor! </h2>')
else if (hours>=13&&hours<=17) 
//MESSAGE FOR AFTERNOON
document.write('<h2>Good Afternoon! </h2>')
else if (hours>=18&&hours<=20) 
//MESSAGE FOR EVENING (6pm-8pm)
document.write('<h2>Good Evening! </h2>')
else if (hours>=21&&hours<=11) 
//MESSAGE FOR NIGHT (9pm-11pm)
document.write('<h2>Good Night! </h2>')
else 
//MESSAGE FOR LATE NIGHT (12pm-4am)
document.write('<h2>Wow! You`re still awake. Working Late?</h2>')

在Javascript中显示问候消息

4 个答案: