如何使用 javascript 在 html 中安排 enable/disable 元素？

Question

假设页面上有 4 个按钮，标签为按钮 A、按钮 B、按钮 C 和按钮 D。通过单击每个按钮，用户将重定向到另一个页面。但是，我希望每个按钮在预定义的日期和时间处于活动状态，并且该按钮在激活时的悬停颜色为绿色。即刻，按钮 A 在 2019 年 6 月 23 日 2:00 pm 至 4:00 pm 激活。它的颜色是绿色，其他按钮的颜色是红色，它们被停用。在下一个预定时间，按钮 B 为绿色并激活，依此类推。是否可以使用 Javascript ?

更新：请帮我找出下面的代码如何使用此拓扑：

HTML:
<div id="wrap">
  <header>
    <h1>How this code works?</h1>
    <div id="nav">
      <ul>
        <li><a class="active" href="#home">ITEM1</a></li>
        <li><a href="#about">ITEM2</a></li>
        <li><a href="#contact">ITEM3</a></li>
      </ul>
    </div>
  </header>
  <section>
  </section>  
  <footer></footer>
</div>

CSS: * { box-sizing:border-box; } body { 颜色：#222； padding:1em2em;背景：#eee； font:13px/1.4 'open sans', sans-serif; } h1, h2 { margin:0 0 .5em; line-height:1.2; font-family:'open sans condensed', sans-serif; } h1 { 颜色：#f90; text-transform：大写； } p { margin:1em 0; } 一个{颜色：#06c; -webkit-transition:.2s线性；过渡：.2s线性； } a:hover { 颜色：#07c； } 页脚{颜色：#888； clear:both; font-size:12px; margin:2em 0 0; text-align：中心； } 页脚 a { 颜色：#444； } #wrap { margin:1em 自动； padding:1.5em;背景：#fff; box-shadow:0 5px 5px 0 rgba(0,0,0,.2); }

#nav { background:#333; }
  #nav ul { padding:0; overflow:hidden; list-style:none; }
  #nav li { float:left; }
  #nav a { color:#fff; display:block; padding:.5em 2em; }
    #nav a:hover { background:#666; }
    #nav a.active { color:#222; background:#f90; }
      #nav a.active:hover {}
      #nav.over a.active { color:#fff; background:none; }
        #nav.over a.active:hover { background:#666; }

JavaScript:

let timeToActivate = (new Date("June 23, 2019 14:00:00")).getTime();
let timeToDeActivate = (new Date("June 24, 2019 16:00:00")).getTime();
let currTime = Date.now();
var NewClass = document.querySelector("#nav a");

if(currTime > timeToActivate && currTime < timeToDeActivate){
    // Write Code To Activate Button
    NewClass.setAttribute("class","active");
}else if(currTime < timeToActivate){
NewClass.setAttribute("class","active");


    setTimeout(() => {

         // write code to activate button

         // To Deactivate button on 4pm
         setTimeout(() => {

              // write code to deactivate button

         }, timeToDeActivate - Date.now())

    }, timeToActivate - currDate);
}

更新 2：使用 jquery 的解决方案这是工作解决方案。我刚刚更新了 post 以防其他人有相同的目的：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>   
 btna = [
    {
      "id":"#btn123",
      "formId" : "#wpcf7-f4849-p4850-o1",
      'openTime' : "June 23, 2019 14:00:00",
      'closeTime' : "June 23, 2019 14:00:00",
    },
    {
      "id":"#btn1234",
      "formId" : "#wpcf7-f4940-p4850-o2",
      'openTime' : "June 23, 2019 14:00:00",
      'closeTime' : "June 25, 2019 14:00:00",
    },
    {
      "id":"#btn12345",
      "formId" : "#wpcf7-f4941-p4850-o3",
      'openTime' : "June 23, 2019 14:00:00",
      'closeTime' : "June 28, 2019 14:00:00",
    }
  ]
  $(document).ready(function(){
    let openTime
    let closeTime
    let button
    let itemForm
    let now = Date.now();
    btna.map(function(item){
      openTime = (new Date(item.openTime)).getTime()
            closeTime = (new Date(item.closeTime)).getTime()
      button = $( item.id )
      itemForm = $( item.formId )
      if (closeTime > now && openTime < now ) {
        // Button in correct time period
        button.addClass("active")
        // if you don't want to auto hide form in page startup just comment out this line 
        itemForm.hide()
        button.click(function(){
           $( item.formId ).toggle(250)
        })
      }else{
        // Button is'nt in its time period
        button.addClass("ex1")
        itemForm.hide()
      }
    })
  })</script>

Answer 1

让按钮默认停用，

let timeToActivate = (new Date("June 23, 2019 14:00:00")).getTime();
let timeToDeActivate = (new Date("June 23, 2019 16:00:00")).getTime();
let currTime = Date.now();

if(currTime > timeToActivate && currTime < timeToDeActivate){
    // Write Code To Activate Button
}else if(currTime < timeToActivate){

    // To Activate on 2pm
    setTimeout(() => {

         // write code to activate button

         // To Deactivate button on 4pm
         setTimeout(() => {

              // write code to deactivate button

         }, timeToDeActivate - Date.now())

    }, timeToActivate - currTime);
}

根据你更新的问题，我创建了一个 fiddle，检查它是否正常工作

https://jsfiddle.net/Abhay_Sehgal20/cy2jqmpu/5/

如何使用 javascript 在 html 中安排 enable/disable 元素？

How can I schedule enable/disable an element in html using javascript?

html

javascript

forms

wordpress

disabled-input