1. 首页
  2. 问答
  3. setInterval函数 - 查询

setInterval函数 - 查询

2016-08-09 52 views
0

我需要得到一个帮助“的setInterval（函数（）{}”功能，我的代码工作setInterval函数 - 查询

功能应显示弹出消息时，黄色细胞数等于数。红色单元格，我在下面列出了我的代码和概念图片，请帮助！:-)

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

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

这是我现在的代码。

$(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); 
 
     }); 
 

 

 
    });
 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> 
 
<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>

example colored table

来源

2016-08-09 Tariq Sherriff

+0

你必须结束与各线; –

+2

为什么你需要'setInterval'？更改后可以检查每种颜色的盒子的长度，不是吗？ –

+0

除了没有结束带终止符（;）的行之外，您究竟在哪里调用了代码中的setInterval函数？ –

回答

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>

来源

2016-08-09 16:43:40 showdev

+0

最小化代码是最好的！谢谢。 –

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>

来源

2016-08-09 16:56:26 gaetanoM

+0

优秀的解决方案。谢谢。 –

相关问题

 相关问题