链接 enabled/disabled 基于一天中的时间？ （30 分钟增量）
Links enabled/disabled based on time of day? (30 min increments)
我有一个下拉列表，可以让一个人 select 他们希望他们的食物被送达。我想知道是否有办法在一天的特定时间过去后禁用每个 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>
谢谢！
Would this be considered a server side or can be it be done with
javascript?
您需要在服务器端执行此操作。如果您在客户端执行此操作，时间将从用户的计算机获取并且不一定准确（例如，如果他们有意将计算机时钟设置为提前 15 分钟）。
如果您不担心不同客户端计算机时间/时区之间的时间冲突，您可以使用 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，你可以遍历它们并检查当前时间是否小于最大时间。如果为真，则隐藏该元素：
// 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";
}
}
我有一个下拉列表，可以让一个人 select 他们希望他们的食物被送达。我想知道是否有办法在一天的特定时间过去后禁用每个 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>
谢谢！
Would this be considered a server side or can be it be done with javascript?
您需要在服务器端执行此操作。如果您在客户端执行此操作，时间将从用户的计算机获取并且不一定准确（例如，如果他们有意将计算机时钟设置为提前 15 分钟）。
如果您不担心不同客户端计算机时间/时区之间的时间冲突，您可以使用 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，你可以遍历它们并检查当前时间是否小于最大时间。如果为真，则隐藏该元素：
// 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";
}
}