Question

我正在尝试每隔1秒钟使4行的随机数发生变化，而每5行使它的摇杆数发生变化（每1秒钟不发生变化），如果我单击它，则4行的变化将是停止了。

我只为5行编写这样的代码
5 4 6 3 1

如果我要这样说的话，它会占用更多行
5 4 6 3 1
1 6 1 3 6
3 2 4 6 8
4 2 1 7 8

如何用更好的方法做到这一点并最大程度地减少代码

<html>

<table >
    <tbody>
        <tr id = 'tt2' style="font-size: 22px;">

        </tr>
    </tbody>
  </table>


  <script>





      var onerow2 = null;
    var onenumber2 = null;
    var numbersrandom2 = null;
    var count2 = 0;
    var done = false;
      function random2(){
        if (done == false){
            one = isit(onerow2,'one')     
            two = isit(onerow2,'two')  
            three = isit(onerow2,'three')  
            four = isit(onerow2,'four')  
            five = isit(onerow2,'five')         
             if (onerow2 == null){
                numbers = [one,two,three,four,five];
              numbersrandom2 = numbers[Math.floor(Math.random() * numbers.length)];
            isit2(numbersrandom2,one,'one')
            isit2(numbersrandom2,two,'two')
            isit2(numbersrandom2,three,'three')
            isit2(numbersrandom2,four,'four')
            isit2(numbersrandom2,five,'five')
        }
        var row = "<td onclick='selectroad(this);'  id='one'>" + one + "</td><td onclick='selectroad(this) ' id='two'>" + two + "</td><td onclick='selectroad(this) ' id='three'>" + three + "</td><td onclick='selectroad(this) ' id='four'>" + four + "</td><td onclick='selectroad(this) ' id='five'>" + five + "</td>"
        document.getElementById("tt2").innerHTML = row;         
        count2 = count2 + 1
        if (count2 == 15){
             onerow2 = null;
     onenumber2 = null;
     numbersrandom2 = null;
     count2 = 0
        }
        return numbersrandom2;
        }
      }


        function isit(i,t){
            if (i != t){
        return Math.floor((Math.random() * 9) + 1) 
        }else{
        return onenumber2
        }
        }
        function isit2(i,t,b){
            if (i == t){
            onerow2 = b;
            onenumber2 = numbersrandom2
        }
        }

      function selectroad(obj) {
        var id = obj.getAttribute("id");
        if (id == onerow2){

             done = true;
        }
      }


      function reload(){         
      setInterval(random2, 1000);         
      }
      reload();
      random2();
  </script>

Answer 1

我不确定您的“点击->停止”任务，可以自己完成，但是主要思路是：

创建一个表并存储所有行和列，然后用setInterval

更新

我添加了停止更新指定行和指定列的功能（向元素添加属性disabled）

var table = initTable(document.getElementById("tbl"), 5, 5)

setInterval(update, 1000, table)

setTimeout(() => table.rows[3].element.attributes["disabled"] = "disabled", 3000) // example disable row updating

function initTable(table, rows, columns) {
  var rows = new Array(rows).fill().map(() => table.appendChild(document.createElement("tr")))
  return { element: table, rows: rows.map(row => ({ element: row, columns: new Array(columns).fill().map(() => row.appendChild(document.createElement("td")) )})) }
}

function update(table) {
  for(const row of table.rows)
    if(!row.element.attributes["disabled"])
       for(const column of row.columns)
          if(!column.attributes["disabled"])
            column.innerText = Math.floor(Math.random() * 10)

}

<table id="tbl" style="font-size: 22px;"></table>

有没有一种方法可以在多行中随机编号？

1 个答案: