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

Display different checkboxes based on time of day

本文关键字：复选框 显示 时间 一天      更新时间：2023-09-26
大家好，只是想知道是否可以根据当前时间显示不同的复选框。我正在构建一个药物提醒应用程序，因此该应用程序将显示用户应根据当前时间服用的不同药物。例如，在下午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>

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

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/

相关文章：