setInterval函数 - 查询

时间：2016-08-09 16:28:22

标签： javascript jquery html css html5

我需要帮助来获得一个＆＃34; setInterval（function（）{}＆＃34;函数来处理我的代码。

当黄色单元格数等于红色单元格数时，该函数应显示弹出消息。我在下面提供了我的代码和概念图片。请帮忙！ ： - ）

以下是我想要执行弹出消息的JavaScript。

setInterval(function(){ 
var reds = document.getElementByClassName('red_block')
var yellows = document.getElementByClassName('yellow_block')
if(reds.length == yellows.length){
alert("what ever")
}
}, 1);

这是我现在的代码。

＆＃13;
＆＃13; 
    $(document).ready(function() {

      var color = "White";
      $("#btnWhite").click(function() {
        color = "#FFFFFF"
      });
      $("#btnYellow").click(function() {
        color = "#FFFF00"
      });
      $("#btnRed").click(function() {
        color = "#FF0000"
      });


      $("table tr td").click(function() {
        $(this).css("background-color", color);
      });


    });
＆＃13; 
        body {
          padding: 5px;
        }
        
        label {
          font-weight: bold;
        }
        
        input[type=button] {
          padding: 10px 16px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
        }
        
        p {
          margin: 1em 0 0;
        }
        
        td.pz {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FFFFFF;
        }
        
        .red_block {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FF0000;
        }
        
        .yellow_block {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FFFF00;
        }
        
        td.padding {
          width: 59px;
          height: 57px;
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <br>
  <br>
  <input id="btnWhite" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFFFF; border: 1px dotted #999" value="">
  <input id="btnYellow" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFF00; border: 1px dotted #999" value="">
  <input id="btnRed" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FF0000; border: 1px dotted #999" value="">
  <br>
  <br>
  <table>
    <tr>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
    </tr>
    <tr>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
    </tr>
    <tr>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
    </tr>
    <tr>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
    </tr>
    <tr>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="yellow_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
      <td class="red_block"></td>
    </tr>
  </table>
</body>
＆＃13;
＆＃13;
＆＃13;

example colored table

2 个答案:

答案 0 :(得分：1)

我建议使用您定义的CSS类，而不是直接设置背景颜色。这样，您可以计算每个类的块。为了提高效率，我还建议在每次点击后进行计数，而不是使用计时器来定期计数。

我还为每个按钮添加了data attribute，以帮助减少代码冗余。单击任何按钮时，“画笔”将设置为与该按钮关联的颜色类。该类随后将应用于任何单击的块。

jQuery(function() {

  var brush = "white_block";

  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  jQuery('td').on('click',function() {

    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);

    var reds = jQuery('.red_block').length,
        yellows = jQuery('.yellow_block').length;

    if (reds == yellows) {
      console.log('MATCH');
    } else {
      console.log('MISMATCH');
    }

  });

});
.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}
.white_block {
  background-color: #FFFFFF;
}
.red_block {
  background-color: #FF0000;
}
.yellow_block {
  background-color: #FFFF00;
}

table {
  margin:1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="block white_block" data-brush="white_block">
<input type="button" class="block yellow_block" data-brush="yellow_block">
<input type="button" class="block red_block" data-brush="red_block">

<table>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
</table>

答案 1 :(得分：0)

您可以使用jQuery filter简单地计算有多少单元格具有背景颜色红色/黄色：

$(function () {
  var color = "#FFFFFF";
  $("#btnWhite").click(function() {
    color = "#FFFFFF"
  });
  $("#btnYellow").click(function() {
    color = "#FFFF00"
  });
  $("#btnRed").click(function() {
    color = "#FF0000"
  });


  $("table tr td").click(function() {
    $(this).css("background-color", color);

    var reds = $("table tr td").filter(function() {
      return $(this).css('background-color') == "rgb(255, 0, 0)";
    })
    var yellows  = $("table tr td").filter(function() {
      return $(this).css('background-color') == "rgb(255, 255, 0)";
    })


    if (reds.length == yellows.length) {
      setTimeout(function() {alert("what ever")}, 100);
    }
  });
});
body {
  padding: 5px;
}

label {
  font-weight: bold;
}

input[type=button] {
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

p {
  margin: 1em 0 0;
}

td.pz {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
  background-color: #FFFFFF;
}

.red_block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
  background-color: #FF0000;
}

.yellow_block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
  background-color: #FFFF00;
}

td.padding {
  width: 59px;
  height: 57px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br>
<br>
<input id="btnWhite" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFFFF; border: 1px dotted #999" value="">
<input id="btnYellow" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFF00; border: 1px dotted #999" value="">
<input id="btnRed" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FF0000; border: 1px dotted #999" value="">
<br>
<br>
<table>
    <tr>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
    </tr>
    <tr>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
    </tr>
    <tr>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
    </tr>
    <tr>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
    </tr>
    <tr>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="yellow_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
        <td class="red_block"></td>
    </tr>
</table>

相关问题
最新问题