โดย Golff Sinlapachai » 01/10/2019 1:27 pm
ตอนนี้ผมติด จะเช็คยังไงครับว่าเลขที่กดเป็นเลขคู่หรือคี่เอาตรงไหนมาเช็คครับ
ผมจะทำเเบบนี้ครับ
ถ้ากดตัวเลขคู่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่1 (1,2,3,4,5,6,7,8,)
ถ้ากดตัวเลขคี่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่2 (9,10,11,12,13,14,15,16)
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style>
*{
margin: 0;
padding: 0;
}
.Analysis {
width:70%;
height: 139px;
margin:0 auto;
border:1px solid #000000;
margin-bottom: 100px;
}
.containertt {
width:70%;
height: 50px;
margin:0 auto;
text-align: center;
}
table, th {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid black;
border-collapse: collapse;
width: 50px;
height: 50px;
font-size: 30px;
}
.grid-container {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
grid-gap: 2px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: lightblue;
text-align: center;
padding: 10px ;
font-size: 30px;
}
#item1 {
grid-row: 1 / 4;
}
</style>
</head>
<body>
<table class="table" id="demo1" style="background-color:#E6E6E6" >
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="grid-container" >
<div onclick="myFunction(this)" id="item1"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"
font color="red">0</div>
<div onclick="myFunction(this)" class="test" id="ro"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>2</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">4</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>6</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>8</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">10</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">16</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>20</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">22</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">24</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">1</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">5</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">7</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">11</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">13</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>15</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">17</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">19</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">21</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">23</div>
<div onClick="onClick()" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">333</div>
<div onClick="onClick()" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">444</div>
<div class="test"
mouseenter="this.css.backgroundColor='yellow';"
mouseleave="this.css.backgroundColor='lightblue';"
>555</div>
</div>
<script>
myFunction = i => $("#demo1 td:empty:first").html($(i).html())
var to=$(this).text();
var clicks=0;
var result=false;
backgound="";
function clickCount()
{
clicks += 1;
}
function changBackground()
{
return backgound = clicks==4 ? "backgound:yellow" : "";
}
function reset()
{
$(".test").css("background-color", "lightblue");
clicks=0;
result=false;
return;
}
var clicks = 0;
$(function(){
$(".test").click(function(){
clickCount();
document.getElementById("clicks").innerHTML = clicks;
document.getElementById("demo").innerHTML = $(this).text();
if(clicks ==4){
$(".test").css("background-color", "yellow");
}
if(clicks==5){
reset();}
});
});
// var clicks = 0;
// function onClick() {
// clicks += 1;
// document.getElementById("clicks").innerHTML = clicks;
// if(clicks==4){
// $("#test").attr("style",backgound);
// }
// };
</script>
<p>Clicks: <a id="clicks">0</a></p>
<p id="demo"></p>
</script>
<table class="table" id="demo2" style="background-color:#E6E6E6" >
<tr>
<td>ครั้งที่5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>ถูก</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" class="button" name="tt" value="555555">
</body>
</html>
ตอนนี้ผมติด จะเช็คยังไงครับว่าเลขที่กดเป็นเลขคู่หรือคี่เอาตรงไหนมาเช็คครับ
ผมจะทำเเบบนี้ครับ
ถ้ากดตัวเลขคู่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่1 (1,2,3,4,5,6,7,8,)
ถ้ากดตัวเลขคี่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่2 (9,10,11,12,13,14,15,16)
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style>
*{
margin: 0;
padding: 0;
}
.Analysis {
width:70%;
height: 139px;
margin:0 auto;
border:1px solid #000000;
margin-bottom: 100px;
}
.containertt {
width:70%;
height: 50px;
margin:0 auto;
text-align: center;
}
table, th {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid black;
border-collapse: collapse;
width: 50px;
height: 50px;
font-size: 30px;
}
.grid-container {
display: grid;
grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
grid-gap: 2px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: lightblue;
text-align: center;
padding: 10px ;
font-size: 30px;
}
#item1 {
grid-row: 1 / 4;
}
</style>
</head>
<body>
<table class="table" id="demo1" style="background-color:#E6E6E6" >
<tr >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="grid-container" >
<div onclick="myFunction(this)" id="item1"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"
font color="red">0</div>
<div onclick="myFunction(this)" class="test" id="ro"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>2</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">4</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>6</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>8</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">10</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">16</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>20</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">22</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">24</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">1</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">5</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">7</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">11</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">13</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>15</font></div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">17</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">19</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">21</div>
<div onclick="myFunction(this)" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">23</div>
<div onClick="onClick()" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">333</div>
<div onClick="onClick()" class="test"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">444</div>
<div class="test"
mouseenter="this.css.backgroundColor='yellow';"
mouseleave="this.css.backgroundColor='lightblue';"
>555</div>
</div>
<script>
myFunction = i => $("#demo1 td:empty:first").html($(i).html())
var to=$(this).text();
var clicks=0;
var result=false;
backgound="";
function clickCount()
{
clicks += 1;
}
function changBackground()
{
return backgound = clicks==4 ? "backgound:yellow" : "";
}
function reset()
{
$(".test").css("background-color", "lightblue");
clicks=0;
result=false;
return;
}
var clicks = 0;
$(function(){
$(".test").click(function(){
clickCount();
document.getElementById("clicks").innerHTML = clicks;
document.getElementById("demo").innerHTML = $(this).text();
if(clicks ==4){
$(".test").css("background-color", "yellow");
}
if(clicks==5){
reset();}
});
});
// var clicks = 0;
// function onClick() {
// clicks += 1;
// document.getElementById("clicks").innerHTML = clicks;
// if(clicks==4){
// $("#test").attr("style",backgound);
// }
// };
</script>
<p>Clicks: <a id="clicks">0</a></p>
<p id="demo"></p>
</script>
<table class="table" id="demo2" style="background-color:#E6E6E6" >
<tr>
<td>ครั้งที่5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>ถูก</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" class="button" name="tt" value="555555">
</body>
</html>[/code]