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

Question

我正在构建一个应用程序来提醒人们服药，该应用程序会根据当前时间显示用户应该服用的药物，例如，如果用户需要在上午 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。有没有办法让复选框根据当前时间显示不同的文字？

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