如何根据当前时间显示不同的复选框名称？答案

【问题标题】：How to display different checkbox name based on current time?如何根据当前时间显示不同的复选框名称？
【发布时间】：2016-06-29 12:53:46
【问题描述】：

我正在构建一个提醒人们服药的应用程序，该应用程序将根据当前时间显示用户应该服用的药物，例如如果用户需要在上午 10 点服用药物 1 和 2，那么当时间为上午 10 点至上午 10 点 59 分时，复选框将显示“药物 1”和“药物 2”供用户勾选。但是如果用户需要在晚上 9 点服用药物 3 和 4，那么在晚上 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。有没有办法让复选框根据当前时间显示不同的单词？

【问题讨论】：

能否包含您的 JavaScript 代码？！
我没有这个函数的 javascript 代码，因为我不知道该怎么做。 validate() 函数只是为了验证是否所有的复选框都被选中。

标签： javascript html function checkbox time

【解决方案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; 这将清除之前设置为可见的复选框。

【讨论】：

谢谢！从来没有想过这样做！ :)