Fatal编程技术网
  • javascript/
  • Javascript 是否根据一天中的时间启用/禁用链接？（30分钟增量）

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

javascript jquery time

Javascript 是否根据一天中的时间启用/禁用链接？（30分钟增量）,javascript,jquery,time,Javascript,Jquery,Time,我有一个下拉的时间，供一个人选择他们希望他们的食物被交付。我想知道是否有一种方法可以在一天中的某段时间过去后禁用每个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 cla

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

    
上午11:00-11:30

  • 11:30-12:00 PM
    • 
下午12:00-12:30
下午12:30-01:00

  • 01:00-01:30 PM
    • 

  • 01:30-02:00 PM
    • 
下午02:00-02:30
下午02:30-03:00
下午3:00-03:30
下午03:30-04:00
下午4:00-04:30
下午4:30-05:00
下午5:00-5:30
下午5:30-06:00

  • 06:00-06:30 PM
    • 

  • 06:30-07:00 PM
    • 
07:00-07:30下午

  • 07:30-08:00 PM
    • 

  • 08:00-08:30 PM
    • 

  • 08:30-09:00 PM
    •
谢谢大家!

这会被视为服务器端还是可以通过 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>
您需要在服务器端执行此操作。如果您在客户端执行此操作，则时间将取自用户的计算机，不一定准确（例如，如果他们有意将计算机时钟设置为提前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>

    
上午11:00-11:30

  • 11:30-12:00 PM
    • 

  • 12:00-12:30 PM
    • 
12:30-01:00 PM

  • 01:00-01:30 PM
    • 

  • 01:30-02:00 PM
    • 

  • 02:00-02:30 PM
    • 

  • 02:30-03:00 PM
    • 

  • 03:00-03:30 PM
    • 

  • 03:30-04:00 PM
    • 

  • 04:00-04:30 PM
    • 

  • 04:30-05:00 PM
    • 

  • 05:00-05:30 PM
    • 

  • 05:30-06:00 PM
    • 

  • 06:00-06:30 PM
    • 

  • 06:30-07:00 PM
    • 

  • 07:00-07:30 PM
    • 

  • 07:30-08:00 PM
    • 

  • 08:00-08:30 PM
    • 

  • 08:30-09:00 PM
    •
然后使用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";
            }
        }

//当前时间
变量日期=新日期（）；
//每小时每分钟
var check=date.getHours（）+“”+date.getMinutes（）；
//获取项目列表
var times=document.getElementsByClassName（“c-下拉菜单项--time”）；
//循环并比较
对于（var i=0；i
您可以在任何一方都这样做，但这是您的最小问题。你有没有考虑过你的用户的时区可能与你的服务器的不同？@FrédéricHamidi它只会是本地的（EST），因为传递的半径仅在50英里以内。好吧，那么，时区问题不会影响你。现在，“禁用”项目（我假设您希望使其不可选择，因为