基于一天中的时间显示不同的复选框

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/