时间戳

首页 > 解决方案 > 突出显示新开奖号码

javascript - 突出显示新开奖号码

问题描述

我想指定我的页面并添加仅突出显示最新生成的数字。当前页面突出显示每个数字，我希望它只突出显示表格中最新的数字然后出去，即当数字12被绘制时，带有数字12的单元格将突出显示，如果数字被绘制55然后 12 熄灭， 55 亮起

jQuery(function ($) {
    var bingo = {
      selectedNumbers: [],
      generateRandom: function () {
        var min = 1; //Liczba początkowa
        var max = 89; //Liczba końcowa
        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;
    };
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl">

<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>

</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

解决方案

您可以这样做：不设置内联样式background-color: yellow，而是向新附加的单元格添加一个类。单击生成按钮时，从所有单元格中删除此类，并将其仅添加到新附加的单元格中。

jQuery(function($) {
  var bingo = {
    selectedNumbers: [],
    generateRandom: function() {
      var min = 1; //Liczba początkowa
      var max = 89; //Liczba końcowa
      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.active").removeClass("active");
    $("td").each(function() {
      if ($(this).attr("CellValue") === random) {
        $(this).addClass("active");
      }
    });
  });
  window.onbeforeunload = function(e) {
    e = e || window.event;
    var returnString = "Are you sure?";
    if (e) {
      e.returnValue = returnString;
    }
    return returnString;
  };
});
.active {
  background-color:yellow;
}
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl">

<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>

</html>

推荐阅读