根据一天中的时间启用/禁用链接？ （30 分钟增量）

Posted 2023-03-06

【中文标题】根据一天中的时间启用/禁用链接？ （30 分钟增量）

【英文标题】：Links enabled/disabled based on time of day? (30 min increments)

【发布时间】：2015-11-22 01:38:24

【问题描述】：

我有一个时间下拉列表供人们选择他们希望送餐的时间。我想知道当一天的某个时间过去时是否有办法禁用每个 li 项目。这会被视为服务器端还是可以使用 javascript 完成？

    <ul class="c-dropdown__list time">
     <li class="c-dropdown__item--time" data-dropdown-value="ASAP">11:00 - 11:30 AM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">11:30 - 12:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">12:00 - 12:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">12:30 - 01:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">01:00 - 01:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">01:30 - 02:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">02:00 - 02:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">02:30 - 03:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">03:00 - 03:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">03:30 - 04:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">04:00 - 04:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">04:30 - 05:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">05:00 - 05:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">05:30 - 06:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">06:00 - 06:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">06:30 - 07:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">07:00 - 07:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">07:30 - 08:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">08:00 - 08:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time">08:30 - 09:00 PM</li>
   </ul>

谢谢！

【问题讨论】：

您可以在任一侧执行此操作，但这是您的问题中最少的一个。您是否考虑过用户的时区可能与您服务器的不同？

@FrédéricHamidi 这只会是本地 (EST)，因为交货半径仅在 50 英里半径内。

好吧，时区问题不会影响您。现在，“禁用”这些项目（我假设您想让它们无法选择，因为不能禁用 <li> 元素）可以从服务器或客户端同样好地完成。决定权在你。

@BeckyT 如果它为您解决了问题，请记住接受答案:)

【参考方案1】：

如果您不担心不同客户端计算机时间/时区之间的时间冲突，您可以使用 javascript 执行此操作。

首先，为您的项目设置一个数据属性，以说明最长显示时间：

<ul class="c-dropdown__list time">
    <li class="c-dropdown__item--time" data-dropdown-value="ASAP" data-max="1130">11:00 - 11:30 AM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1230">11:30 - 12:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1230">12:00 - 12:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1300">12:30 - 01:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1330">01:00 - 01:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1400">01:30 - 02:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1430">02:00 - 02:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1500">02:30 - 03:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1530">03:00 - 03:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1600">03:30 - 04:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1630">04:00 - 04:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1700">04:30 - 05:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1700">05:00 - 05:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1730">05:30 - 06:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1800">06:00 - 06:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1830">06:30 - 07:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1900">07:00 - 07:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="1930">07:30 - 08:00 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="2000">08:00 - 08:30 PM</li>
    <li class="c-dropdown__item--time" data-dropdown-value="time" data-max="2030">08:30 - 09:00 PM</li>
</ul>

然后使用 javascript，您可以遍历它们并检查当前时间是否小于最大时间。如果为 true，则隐藏元素：

// current time
        var date = new Date();
        //concat hour and minute 
        var check = date.getHours() + "" + date.getMinutes();
        //get list of items
        var times = document.getElementsByClassName("c-dropdown__item--time");

        //loop through and compare
        for (var i = 0; i < times.length; i++) 

            var maxtime = parseInt(times[i].getAttribute("data-max"));

            if(maxtime < check) 
                //set display to none
                times[i].style.display = "none";
            
        

【讨论】：

太棒了！这很好用。谢谢你的解释。另一个问题，不是不显示，而是应用一个类来“禁用”列表项，比如将其变灰？

是的，这可以做到。无需设置显示，只需使用 item[i].className += 'additionalClass' 添加一个类。然后在类定义中设置为不可选择。这里有一个很好的解释：***.com/questions/6900124/…

【参考方案2】：

这会被视为服务器端还是可以用 javascript？

您需要在服务器端执行此操作。如果您在客户端执行此操作，则时间将从用户的计算机获取，并且不一定准确（例如，如果他们有意将计算机时钟设置为提前 15 分钟）。