Question

我有一个下拉时间供一个人选择他们希望他们的食物交付。我想知道是否有一种方法可以在当天的某个部分已经过去时禁用每个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>

谢谢！

Answer 1

这会被视为服务器端还是可以完成 JavaScript的？

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

Answer 2

如果您不担心不同客户端计算机时间/时区之间的冲突，可以使用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";
            }
        }

根据时间启用/禁用链接？（增加30分钟）

2 个答案:

根据时间启用/禁用链接？ （增加30分钟）

2 个答案:

根据时间启用/禁用链接？（增加30分钟）