Question

im试图在一页上具有多个计时器，当用户更改选择中的选项时会激活该计时器。项目具有保存值并创建然后将值附加到选项的输入。我试图激活计时器的onChange选项。

ive已将其添加到Codepen中，因此易于理解。

我无法找出一种为每个tr保留计时器的方法，而是使用onChange重新启动。

https://codepen.io/taldesign/project/editor/ZvxYkV#0

var ids = ["lobby", "tThree"];
var gurds = [];
var counter = 0;
var seconds = 0;
var minutes = 0;
var clockCounter = 0;


function createList() {
    var userInput = document.getElementById("uGurd");
    gurds.push(userInput.value);
    userInput.value = "";
}


function userFinish() {
    while (counter < ids.length) {
        var row = document.getElementById(ids[counter]);
        var td = document.createElement("TD");
        row.appendChild(td);
        var select = document.createElement("SELECT");
        td.appendChild(select);

        for (var j = 0; j < gurds.length; j++) {
            var option = document.createElement("OPTION");
            option.innerText = gurds[j];
            select.appendChild(option);
        }
        counter++;
    }
}

setInterval(function () {


    var distance = 3600;
    if (distance > 3600) {
        clearInterval();
        //   document.getElementById("demo").innerHTML = "EXPIRED";
    }
    if (seconds % 60 == 0 && seconds > 1) {
        seconds = 0;
        minutes++;
    }

    var clockPosition = document.getElementsByClassName("clock");

    while (clockCounter < clockPosition.length) {
        clockPosition[clockCounter].innerText = seconds + " : " + minutes + " ";

        clockCounter++;
    }
    clockCounter = 0;

    seconds++;
}, 1000);

/**
 * index.scss
 * - Add any styles you want here!
 */

body {
  background: #f5f5f5;
}

.HR {
    display: flex;
    align-content: center;
    justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
  
    <section>
        <container class="HR">
            <div class="flex fullwidth">
                    <input type="text" id="uGurd" placeholder="add name here">
            </div>
            <div class="flex fullwidth">
                    <button type="button" id="clearList" value="add" onclick="createList()">add</button>
            </div>
        </container>
    </section>
  
  
    <section>
        <container class="HR">
            <div class="shuffleDiv">
                <button value="distribute" onclick="userFinish()">send</button>
            </div>
        </container>
    </section>
  
 <section>
        <container class="HR">
            <table id="result">
                <tr>
                    <th>position</th>
                    <th>time</th>
                    <th>worker</th>
                </tr>
                <tr id="lobby">
                    <td>Lobby</td>
                    <td class="clock"></td>
                </tr>
                <tr id="tThree">
                    <td>36</td>
                    <td class="clock"></td>
                </tr>

            </table>
        </container>
    </section>
  <script src="scripts/index.js"></script>
</body>
</html>

JS使用onChange <select>激活的多个计时器

0 个答案: