Ich suche nach einem Skript, das eine Popup-Nachricht anzeigt, wenn die Anzahl der gelben Zellen der Anzahl der roten Zellen entspricht. Ich habe ein Bild des Konzepts darunter eingefügt. Jede Hilfe wird geschätzt.Popup-Nachricht anzeigen, wenn die Nummer einer Zellengruppe gleich der Nummer einer anderen Zellengruppe ist
hoffen, dass die Klassen Ihrer einzelnen farbigen Blöcke red_block und yellow_block
setInterval(function(){
var reds = document.getElementByClassName('red_block')
var yellows = document.getElementByClassName('yellow_block')
if(reds.length == yellows.length){
alert("what ever")
}
}, 1);
document.getElementByClassName wird ein Array von Element zurückgeben
Geben timeinterval zu 1ms, die Klasse mit den Werten zu überprüfen jeden Moment
würde ich die 1ms wie folgt setzen: setInterval (Funktion (1ms). Und wo sollte ich den Code? Danke, dass Sie mir helfen. –
@TariqSherriff Nein, Sie können nicht so sagen. Ich habe das schon auf 1ms dort eingestellt Die Syntax von setInterval ist 'setInterval (function() {}, interval)' interval ist nur eine Ganzzahl, setze nicht 'ms' oder' s' usw. Deine Funktion sollte in die 'if' Anweisung kommen Ändern Sie die if-Anweisung mit Ihren definierten Klassen. (Sie können red_block und yellow_block gemäß Ihrem Code ändern) –
Macht es Ihnen etwas aus, ein Beispiel auf jrddle zu geben Ich gebe den Code ein, den ich jetzt habe –
Ich habe aufgenommen das Beispiel unten.
$(document).ready(function() {
var color = "White";
$("#btnWhite").click(function() {
color = "#FFFFFF"
});
$("#btnYellow").click(function() {
color = "#FFFF00"
});
$("#btnRed").click(function() {
color = "#FF0000"
});
$("#btnBlue").click(function() {
color = "#0070C0"
});
$("#btnGreen").click(function() {
color = "#00FF00"
});
$("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="">
<input id="btnBlue" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #0070C0; border: 1px dotted #999"
value="">
<input id="btnGreen" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #00FF00; 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>Hallo Syam ... ich bin ziemlich neu zu scripting und ich habe Probleme mit diesem Code zu arbeiten.Könnten Sie mir bitte sagen, wo ich die Funktion einfügen und es für mich testen.Ich habe meinen Code oben enthalten.Ihre Unterstützung wird sehr geschätzt. –
jquery wäre schön ?? –
ja j Frage ist in Ordnung. Bitte helfen Sie. –