主页 / 问题 / 1188922
Accepted
Alex
Asked:2021-10-11 23:00:50 +0000 UTC2021-10-11 23:00:50 +0000 UTC

setTimeout 和动作取决于它的值

  • 772

红色、蓝色、绿色按钮，当按下时，将对应的 div 01、02、03 的颜色更改为指定的颜色。使用 ms 按钮（为方便起见）我为这三个 div 设置时间（延迟）。间隔 (setTimeout) 后的开始按钮将这些 div 的颜色从标准米色更改为橙​​色。

我希望在按下最后两个按钮后，可以使用红色、蓝色、绿色按钮更改 div 的颜色，如下所示：

  • 如果您在 6 秒后按下绿色按钮，颜色将立即变为绿色，因为。3 秒延迟已经过去；- 如果你以这种方式按下红色按钮，那么颜色将在 2 秒内变为红色，因为 对于这个女主角，延迟设置为 8 秒；- 蓝色按钮类似于红色，但在 6 秒后。

function f01(d,s) {
    document.getElementById(d).style.background = s;
}
function f02() {
    let doc = document.getElementsByClassName('s');
    doc[0].value = 8000;
    doc[1].value = 12000;
    doc[2].value = 3000;
}
function start() {
    setTimeout(f03, document.getElementsByClassName('s')[0].value); // 8000  RED
    setTimeout(f04, document.getElementsByClassName('s')[1].value); // 12000 BLUE
    setTimeout(f05, document.getElementsByClassName('s')[2].value); // 3000  GREEN
    f01('d01','beige');
    f01('d02','beige');
    f01('d03','beige');  
}
function f03() {
    document.getElementById('d01').style.background = 'orange';
}
function f04() {
    document.getElementById('d02').style.background = 'orange';
}
function f05() {
    document.getElementById('d03').style.background = 'orange';
}
#d01, #d02, #d03 {width: 122px; height: 40px; background: beige;}
.s {width: 50px; height: 20px; font-size: 12px;}
.test {width: 60px; height: 26px; background: #CCCCCC;}
<button class="test" onclick="f02()">ms</button>
<br><br>
<div id="d01">01</div>
<input class="s" type="number">
<button class="test" onclick="f01('d01','red')">RED</button>
<br><br>
<div id="d02">02</div>
<input class="s" type="number">
<button class="test" onclick="f01('d02','lightblue')">BLUE</button>
<br><br>
<div id="d03">03</div>
<input class="s" type="number">
<button class="test" onclick="f01('d03','green')">GREEN</button>
<br><br>
<button class="test" onclick="start()">start</button>

如何正确地做到这一点，是否有可能具有一些通用功能来替换项目中不同位置的间隔。谢谢你。

javascript

1 个回答

  1. Best Answer

    有没有可能有一些共同的功能......

    首先，扔掉编号的 id（和一般的 id），并通过枚举使用相同的“卡片”元素。所有填充物和所需颜色 - 收集在一个阵列中。

    通过计时器。点击开始：

    • 将时间存储在外部变量中new Date()
    • 每个区块都有自己的计时器，
    • 当它滴答作响时，它会检查：您是否单击了按钮？将设置准备好的颜色，否则 - 橙色。

    另一方面，绘制按钮只需btn_clicked = true在单击时暴露其对象。并另外比较从开始经过的时间。如果花费超过timeout- 立即绘制块。

    let data = [
  {
    timeout: 2000,   // Через сколько миллисекунд перекрасить блок
    color: "#c00",   // в какой цвет (если на него кликнут)
    btn_name: "RED", // Текст самой кнопки при создании HTML
    btn_clicked: false,
  },
  {
    timeout: 8000,
    color: "#090",
    btn_name: "GREEN",
    btn_clicked: false,
  },
  {
    timeout: 3000,
    color: "#169",
    btn_name: "BLUE",
    btn_clicked: false,
  },
];

insert_html();
set_event_listeners();

/***/
function set_event_listeners() {
  let STARTING_TIME = null;
  
  onclick_start();
  onclick_manage_color();

  function onclick_start() {
    let box = document.querySelectorAll("#main .box"); // закрашиваются
    let input = document.querySelectorAll("#main .inp"); // туда вводят таймаут в секундах

    /***/    
    let start_btn = document.getElementById("start");

    let units_completed = 0;
    // считает количество закрашенных блоков, чтобы по завершению что-то сделать. 

    start_btn.addEventListener("click", function () {
      this.disabled = true;

      update_data();

      STARTING_TIME = new Date();

      for (let i = 0; i < data.length; i++) run_timeout(i);
    });

    /***/
    function update_data() {
      for (let i = 0; i < data.length; i++) {
        data[i].timeout = input[i].value * 1000 || 0;
        data[i].btn_clicked = false;
      }
    }

    function run_timeout(i) {
      let unit = data[i];
      /* unit = { timeout: 8000, color: "#c00", btn_name: "RED", btn_clicked: false } */

      setTimeout(function() {

        box[i].style.backgroundColor = unit.btn_clicked ? unit.color : "orange";

        if (++units_completed >= data.length) {
          start_btn.disabled = false;
        }

      }, unit.timeout);
    }
  }

  function onclick_manage_color() {    
    let btn = document.querySelectorAll("#main .btn");
    let box = document.querySelectorAll("#main .box");    
    let units = document.querySelectorAll("#main .unit");

    for (let i = 0; i < btn.length; i++) {
      btn[i].addEventListener("click", manage_color);
    }

    function manage_color() {
      // this === btn[i]

      let unit_elem = this.closest(".unit"); // элемент, в котором лежит кнопка
      let index = Array.prototype.indexOf.call(units, unit_elem);
      // его номер среди всех остальных блоков (оно же, `i`)
      // под этим же номером хранятся все данные нужного блока в data

      let unit = data[index];

      unit.btn_clicked = true;
      /*** При нажатии start, уже запущенный таймер, если обнаружит btn_clicked == true
       уже сам выставит unit.color вместо orange ***/

      if (unit.timeout < new Date() - STARTING_TIME) {
        // Если уже прошло больше сремени, сразу выставится цвет.
        box[index].style.backgroundColor = unit.color;
      }
    }
  }
}

function insert_html() {
  let html = "";

  for (let i = 0; i < data.length; i++) {
    let unit = data[i];

    html += `
      <div class="unit">
        <div class="box">${ i + 1 }</div>
        <input class="inp" type="number" value="${ unit.timeout / 1000 }">
        <button class="btn">${ unit.btn_name }</button>
      </div>
    `;
  }  
  
  document.getElementById("main").innerHTML = html;
}
    .box {
  width: 100px;
  height: 40px;
  background: beige;
}

.inp {
  width: 30px;
  height: 20px;
}

.btn {
  width: 60px;
  height: 26px;
  background: #CCCCCC;
}

.unit {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  box-shadow: 1px 1px 5px #000;
}
    <div id="main"></div>

<button id="start">start</button>

    • 2

相关问题