根据一天中的时间显示不同的复选框

Question

大家好，只是想知道是否可以根据当前时间显示不同的复选框。我正在构建一个药物提醒应用程序，因此该应用程序将根据当前时间显示用户应该服用的不同药物。因此，例如在下午 1 点，复选框可能会显示“药物 A”、“药物 C”。晚上 9 点，复选框可能会显示“药物 B”。

这是我目前所拥有的，但正如您所看到的，无论当前时间是什么，它都会显示相同的复选框。

<form>
<input type="checkbox" name="Med A" value="A">Medication A<br>
<input type="checkbox" name="Med B" value="B">Medication B<br>
<input type="checkbox" name="Med C" value="C">Medication C<br>
<input id=xbutton type="button" onClick="validate()" value="Submit">
</form>

Answer 1

您可以在页面加载时检查小时并设置显示。

JS：

var hour = (new Date()).getHours();

showMed('A', hour == 13);
showMed('B', hour == 21);
showMed('C', hour == 13);

function showMed(med, show) {
    document.getElementById('med' + med).style.display = show ? '' : 'none';
}

HTML：

<form>
<div id='medA'>
  <input type="checkbox" name="Med A" value="A">Medication A
</div>
<div id='medB'>
  <input type="checkbox" name="Med B" value="B">Medication B
</div>
<div id='medC'>
  <input type="checkbox" name="Med C" value="C">Medication C
</div>
</form>

您可能希望每隔一段时间使用 javascript 的 setInterval 运行测试功能，因此如果页面已经加载并且小时更改，您的页面/视图将会更新。

小提琴：https://jsfiddle.net/y3v3njq2/2/