基於一天中的時間顯示不同的複選框

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/