1. 首頁
  2. 問答
  3. setInterval函數 - 查詢

setInterval函數 - 查詢

2016-08-09 84 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

優秀的解決方案。謝謝。 –

相關問題

 相關問題