Question

我正在为我的学校制作一个计时器，显示这位教师在那里教学的时间。有时底部计时器工作，有时它不工作。我需要帮助，但有时它会正确加载，有时它会显示默认文本。但我需要它，以便每当选择一个新的按钮/类型的日期时，它将自动更新时间。我怎么能做到这一点？

var setTime=setInterval(function () {clock()}, 1000)
function clock() {
  var d = new Date();
  document.getElementById("time").innerHTML = d.toLocaleTimeString();
}
var ringerTime = function()  {
  var mark = document.getElementById("time2");
  var norm = document.getElementById("nday");
  var thur = document.getElementById("tday");
  var redN = document.getElementById("reg");
  var redF = document.getElementById("full");
  var period1 = document.getElementById("p1");
  var period2 = document.getElementById("p2");
  var period4 = document.getElementById("p4");
  var period5 = document.getElementById("p5");
  var period7 = document.getElementById("p7");
  var period8 = document.getElementById("p8");
  if(period1.checked && norm.checked)  {
    mark.innerHTML = "8:56:00 AM";
  }
  else if(period1.checked && thur.checked)  {
    mark.innerHTML = "8:49:00 AM";
  }
  else if(period1.checked && redN.checked)  {
    mark.innerHTML = "8:53:00 AM";
  }
  else if(period1.checked && redF.checked)  {
    mark.innerHTML = "8:51:00 AM";
  }
  if(period2.checked && norm.checked)  {
    mark.innerHTML = "9:46:00 AM";
  }
  else if(period2.checked && thur.checked)  {
    mark.innerHTML = "9:32:00 AM";
  }
  else if(period2.checked && redN.checked)  {
    mark.innerHTML = "9:40:00 AM";
  }
  else if(period2.checked && redF.checked)  {
    mark.innerHTML === "9:35:00 AM";
  }
  if(period4.checked && norm.checked)  {
    mark.innerHTML = "12:00:00 PM";
  }
  else if(period4.checked && thur.checked)  {
    mark.innerHTML = "11:31:00 AM";
  }
  else if(period4.checked && redN.checked)  {
    mark.innerHTML = "11:48:00 AM";
  }
  else if(period4.checked && redF.checked)  {
    mark.innerHTML = "11:37:00 AM";
  }
  if(period5.checked && norm.checked)  {
    mark.innerHTML = "12:50:00 PM";
  }
  else if(period5.checked && thur.checked)  {
    mark.innerHTML = "12:13:00 PM";
  }
  else if(period5.checked && redN.checked)  {
    mark.innerHTML = "12:35:00 PM";
  }
  else if(period5.checked && redF.checked)  {
    mark.innerHTML = "12:21:00 PM";
  }
  if(period7.checked && norm.checked)  {
    mark.innerHTML = "2:30:00 PM";
  }
  else if(period7.checked && thur.checked)  {
    mark.innerHTML = "1:37:00 PM";
  }
  else if(period7.checked && redN.checked)  {
    mark.innerHTML = "2:09:00 PM";
  }
  else if(period7.checked && redF.checked)  {
    mark.innerHTML = "1:51:00 PM";
  }
  if(period8.checked && norm.checked)  {
    mark.innerHTML = "3:20:00 PM";
  }
  else if(period8.checked && thur.checked)  {
    mark.innerHTML = "2:20:00 PM";
  }
  else if(period8.checked && redN.checked)  {
    mark.innerHTML = "2:56:00 PM";
  }
  else if(period8.checked && redF.checked)  {
    mark.innerHTML = "2:35:00 PM";
  }
}
window.onload = function()  {
  clock();
  ringerTime; document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
};

.date, h2 p  {
  text-align: center;
  font-size: 200%;
  padding: 0;
  margin: 0;
}
.date h2  {
  margin: 0;
  padding: 0;
}
.date p  {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(#101010, #151515, #101010);
  border: 1px solid red;
  color: white;
  width: 875px;
  font-size: 225%;
}
.select  {
  text-align: center;
  font-family: arial;
  font-size: 125%;
  margin: 0;
  margin-top: 25px;
  padding: 0;
}

<html>
  <body onload="javascript:ringerTime()">
    <div class="date">
      <h2>Time</h2>
      <br>
      <p id="time"></p>
      <br>
      <h2>Time Period Ends</h2>
      <br>
      <p id="time2">%TIME_PERIOD_ENDS%</p>
    </div>
    <div class="select">
      <input id="p1" type="radio" name="period"  value="period1">Period 1
      <input id="p2" type="radio" name="period"  value="period2">Period 2
      <input id="p4" type="radio" name="period"  value="period4">Period 4
      <input id="p5" type="radio" name="period"  value="period5">Period 5
      <input id="p7" type="radio" name="period"  value="period7">Period 7
      <input id="p8" type="radio" name="period"  value="period8">Period 8
      <br>
      <input id="nday" type="radio" name="day" value="normal">Regular Day
      <input id="tday" type="radio" name="day" value="thursday">Thursday
      <input id="reg" type="radio" name="day" value="regularMon">Regular Monday
      <input id="full" type="radio" name="day" value="fullMon">Full Monday
    </div>
  </body>
</html>

JSFiddle：http://jsfiddle.net/5b2f68qd/

Answer 1

它不起作用的原因是因为您在设置之前检查了这些值。还有其他几个问题，但是如果你从你的身体标签上取消呼叫： <body onload="javascript:ringerTime()">到<body> 然后在底部的脚本中更正函数调用，并将振铃调用移到结尾：

window.onload = function()  {
  clock();
  document.getElementById("p1").checked = true;
  document.getElementById("nday").checked = true;
ringerTime();
};

那应该解决它。 Here's a working fiddle.

JavaScript函数自动更新

1 个答案: