时间戳

首页 > 解决方案 > 表和生成器的范围从 到

javascript - 表和生成器的范围从 到

问题描述

我想生成我生成的数字范围，并在表格中从给定数字开始到给定数字。关键是会有一些两个输入会要求从一些数字开始和在哪里结束，并且表格也应该适应这一点，或者它将如何从 1 到 53，然后将显示 53 个表格单元格。谁能做到这一点？

$(function () {
    var bingo = {
      selectedNumbers: [],
      generateRandom: function () {
        var min = 1;
        var max = 89;
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        return random;
      },
      generateNextRandom: function () {
        if (bingo.selectedNumbers.length > 88) {
          alert("Koniec");
          return 0;
        }
        var random = bingo.generateRandom();
        while ($.inArray(random, bingo.selectedNumbers) > -1) {
          random = bingo.generateRandom();
        }
        bingo.selectedNumbers.push(random);
        return random;
      },
    };
    $("td").each(function () {
      var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
      var numberString = parseInt(concatClass, 10).toString();
      $(this)
        .addClass("cell" + numberString)
        .text(numberString);
      $(".cell" + numberString).attr("CellValue", numberString);
    });
    $("#btnGenerate").click(function () {
      var random = bingo.generateNextRandom().toString();
      $(".bigNumberDisplay span").text(random);
      $("td.cell" + random).addClass("selected");
      $("td").each(function () {
        if ($(this).attr("CellValue") === random) {
          $(this).css("background-color", "yellow");
        }
      });
    });
    window.onbeforeunload = function (e) {
      e = e || window.event;
      var returnString = "Are you sure?";
      if (e) {
        e.returnValue = returnString;
      }
      return returnString;
    };
  });

<head>
  <title> Bingo</title>
  <link href="style.css" rel="stylesheet" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>

  <script src="./index.js"></script>
</head>

<body>
  <div class="container">
    <div class="bigNumberDisplay">
      <span>0</span>
    </div>
    <div>
      <input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
    </div>

    <br/>

    <div class="numbersTable">
      <table>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>

    <br/>

  </div>
</body>

</body>

</html>

div {
    text-align: center;
  }

  .bigNumberDisplay {
    font-size: 6em;
  }

  .numbersTable {
    font-size: 1.6em;
  }

  table {
    margin-left: auto;
    margin-right: auto;
  }

  table,tr,td {
    border-collapse: collapse;
    border: solid 1px #999;
  }

  td {
    min-width: 100px;
    color: #fff;
  }

  td.selected {
    color: #000000;
  }

标签： javascripthtmljquerycss

解决方案

您可以将min和存储max在对象中。考虑以下。

$(function() {
  var bingo = {
    selectedNumbers: [],
    min: 1,
    max: 50,
    generateRandom: function() {
      return Math.floor(Math.random() * (bingo.max - bingo.min + 1)) + bingo.min;
    },
    generateNextRandom: function() {
      if (bingo.selectedNumbers.length > 88) {
        alert("Koniec");
        return 0;
      }
      var random = bingo.generateRandom();
      while ($.inArray(random, bingo.selectedNumbers) > -1) {
        random = bingo.generateRandom();
      }
      bingo.selectedNumbers.push(random);
      return random;
    },
  };
  $("td").each(function() {
    var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
    var numberString = parseInt(concatClass, 10).toString();
    $(this)
      .addClass("cell" + numberString)
      .text(numberString);
    $(".cell" + numberString).attr("CellValue", numberString);
  });
  $("#btnGenerate").click(function() {
    var random = bingo.generateNextRandom().toString();
    $(".bigNumberDisplay span").text(random);
    $("td.cell" + random).addClass("selected");
    $("td").each(function() {
      if ($(this).attr("CellValue") === random) {
        $(this).css("background-color", "yellow");
      }
    });
  });
  window.onbeforeunload = function(e) {
    e = e || window.event;
    var returnString = "Are you sure?";
    if (e) {
      e.returnValue = returnString;
    }
    return returnString;
  };
});
div {
  text-align: center;
}

.bigNumberDisplay {
  font-size: 6em;
}

.numbersTable {
  font-size: 1.6em;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table,
tr,
td {
  border-collapse: collapse;
  border: solid 1px #999;
}

td {
  min-width: 100px;
  color: #fff;
}

td.selected {
  color: #000000;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<div class="container">
  <div class="bigNumberDisplay">
    <span>0</span>
  </div>
  <div>
    <input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
  </div>
  <br/>
  <div class="numbersTable">
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <br/>
</div>

然后，您可以在初始化中更改它，或者您可以添加一个 Setter 函数，以便您可以从用户用户输入中获取它们。

您也可以使用它来检查/控制您的细胞计数。

推荐阅读