Как отобразить другое имя флажка в зависимости от текущего времени?

Question

Я создаю приложение, чтобы напомнить людям о приеме лекарств, приложение отобразит лекарственные средства, которые должен принимать пользователь на основе текущего времени, например, если пользователю необходимо принимать лекарства 1 и 2 в 10 утра, тогда, когда время 10 утра 10:59 утра, флажки будут отображать «лекарство 1» и «лекарство 2», чтобы пользователь мог отметить. Но если пользователю нужно принимать лекарства 3 и 4 в 9 вечера, то в 9 вечера 9:59 вечера на флажках будут отображаться «лекарство 3» и «лекарство 4».

HTML, я в настоящее время:

   <div id=aa style="display:none"> 
     <form> 
      <input type="checkbox" name="Medication 1" value="one">Supplement One<br> 
      <input type="checkbox" name="Medication 2" value="two">Supplement Two<br> 
      <input id=xbutton type="button" onClick="validate()" value="Submit"> 
     </form> 

    </div> 

Прямо сейчас, как вы можете видеть, что приложение будет отображать только лекарства 1 и 2 Медикаменты независимо от того, в какое время пользователь должен открыть приложение. Есть ли способ, чтобы флажки отображали разные слова на основе текущего времени?

Answer 1

Это просто дизайн. Это может быть сделано через несколько способов, один из которых находится ниже:

Использование JavaScript, чтобы получить текущее время

var dt = new Date(); 
var time = dt.getHours(); 

Может быть также сделано JQuery (более чистым)

Вы можете включать все флажков первоначально в вашем HTML, но установить их display: none;

Теперь вы можете настройки JS работать соответствующим образом, как:

If(time > 9 && time < 10) //9am-10am 
{ 
    $('#medication1').css('display','block'); 
    $('#medication2').css('display','block'); 
} 

Так же вы можете установить js для других периодов времени. Обязательно установитеdisplay: none; для всех флажков с лекарственными средствами перед установкой определенных флажков display: block; Это позволит очистить флажки, которые были установлены ранее.