在一天中以特定间隔更改文字(JavaScript)?

时间:2018-01-23 01:17:06

标签: javascript

所以我对JS很新,我试图在我的网站上实现一种时间表。我有一个发言人的时间表,他们每半小时改变一次。我想在他们发言时显示发言人的姓名。

此刻我一切正常;但是,我知道我可能以最低效的方式做到了。我为每小时的每个顶部和底部编写了48个if语句...是的,我知道。这是代码:



<html>
<body>

<h1>Test JavaScript</h1>

<p id="demo"></p>

<script>
setInterval(getSchedule, 1000);

function getSchedule(){
var today = new Date()
var curHr = today.getHours()
var curMin = today.getMinutes()

if (curHr == 1 && curMin < 30) {
  document.getElementById("demo").innerHTML = "John";
} else if (curHr == 1 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "George";
} else if (curHr == 2 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jerry";
} else if (curHr == 2 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bailey";
} else if (curHr == 3 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Albert";
} else if (curHr == 3 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Smith";
} else if (curHr == 4 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Ralph";
} else if (curHr == 4 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Matt";
} else if (curHr == 5 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Carl";
} else if (curHr == 5 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 6 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jared";
} else if (curHr == 6 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Ben";
} else if (curHr == 7 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Alberto";
} else if (curHr == 7 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Lopez";
} else if (curHr == 8 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Anguelo";
} else if (curHr == 8 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Tony";
} else if (curHr == 9 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Pam";
} else if (curHr == 9 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "John";
} else if (curHr == 10 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Mark";
} else if (curHr == 10 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Luke";
} else if (curHr == 11 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Paul";
} else if (curHr == 11 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Geoff";
} else if (curHr == 12 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Gavin";
} else if (curHr == 12 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Peter";
} else if (curHr == 13 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Thomas";
} else if (curHr == 13 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Suarez";
} else if (curHr == 14 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Diane";
} else if (curHr == 14 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Al";
} else if (curHr == 15 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Zak";
} else if (curHr == 15 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Shane";
} else if (curHr == 16 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jack";
} else if (curHr == 16 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jill";
} else if (curHr == 17 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Jeff";
} else if (curHr == 17 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Scott";
} else if (curHr == 18 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Ramsey";
} else if (curHr == 18 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Paul";
} else if (curHr == 19 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 19 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jack";
} else if (curHr == 20 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Matt";
} else if (curHr == 20 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Nate";
} else if (curHr == 21 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Sam";
} else if (curHr == 21 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Jenny";
} else if (curHr == 22 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Michelle";
} else if (curHr == 22 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "George";
} else if (curHr == 23 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bill";
} else if (curHr == 23 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} else if (curHr == 24 && curMin < 30) {
  document.getElementById("demo").innerHTML = "Bill";
} else if (curHr == 24 && curMin >= 30) {
  document.getElementById("demo").innerHTML = "Bob";
} 
}
</script>
</body>
</html>
&#13;
&#13;
&#13;

所以我想知道是否有办法简化我的代码。我正在考虑使用一个包含所有扬声器名称的阵列;但是,我将如何在确切的时间迭代它。

任何信息将不胜感激。谢谢!

3 个答案:

答案 0 :(得分:2)

将所有if语句替换为:

  var demoHTML = curHr + (curMin < 30 ? ":00" : ":30");
   document.getElementById("demo").innerHTML = demoHTML

这样整个功能就变成了:

 function getSchedule(){
      var today = new Date()
      var curHr = today.getHours()
      var curMin = today.getMinutes()
      var demoHTML = curHr + (curMin < 30 ? ":00" : ":30");
   document.getElementById("demo").innerHTML = demoHTML
}

答案 1 :(得分:1)

没有真正得到你想做的事情!

<html>
<body>

<h1>Test Java Script</h1>

<p id="demo"></p>

<script>
setInterval(getSchedule, 1000);

var speakers = { "10:00": "kenvin", "10:30": "faker" };

function getSchedule(){
var today = new Date()
var curHr = today.getHours()
var curMin = today.getMinutes()

console.log([curHr, (curMin >= 30) ? "30" : "00"].join(":"));
var key = [curHr, (curMin >= 30) ? "30" : "00"].join(":");

document.getElementById("demo").innerHTML = key + " - " + speakers[key];
}
</script>
</body>
</html>

答案 2 :(得分:0)

单个IF语句就足够了......

[attr.datetime]