ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Golff Sinlapachai · 29/09/2019 10:16 am

ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองเหมือนเราเอาเม้าส์ชี้ที่ตัวเลขครับ

ถ้ากดตัวเลขคู่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่1 (1,2,3,4,5,6,7,8,)
ถ้ากดตัวเลขคี่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่2 (9,10,11,12,13,14,15,16)
ถ้ากดตัวเลขคู่กับคี่ทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่3 (17,18,19,20,21,22,23,24)
เหมือนเราเอาเม้าส์ชี้ที่ตัวเลขครับ
เเล้วพอกดครั้งที่ 5 ให้กรอบหายเเล้วเเสดงในตารางข้างล่าง

โค้ด: เลือกทั้งหมด

<!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" id="test">
	
	<div onclick="myFunction(this)" class="item1" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"
		font color="red">0</div>

		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>2</font></div>

		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">4</div>  
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>6</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>8</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">10</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>  
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">16</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>20</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">22</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">24</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">1</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">5</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">7</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">11</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">13</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>15</font></div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">17</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">19</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">21</div>
		<div onclick="myFunction(this)" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">23</div>


</div>
<script>
	const myFunction = i => $("#demo1 td:empty:first").html($(i).html())




</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>
		


</body>
</html>

[img][img]https://uppic.cc/d/5sF9[/img][/img]

YouTube · 30/09/2019 1:21 pm

ภาพประกอบไม่ขึ้น นะครับ
ลองเอา ภาพมาอัพโหลดที่บอร์ด นะครับ

Golff Sinlapachai · 30/09/2019 1:32 pm

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>

YouTube · 01/10/2019 1:35 pm

ค่อยๆ แกะไปทีละประเด็น

เลขคู่หรือคี เช็คว่า หารสอง แล้วลงตัวหรือไม่ ถ้าลงตัวคือ คู่ ไม่ลงตัวคือคี่

Golff Sinlapachai · 01/10/2019 1:50 pm

mindphp เขียน:ค่อยๆ แกะไปทีละประเด็น

เลขคู่หรือคี เช็คว่า หารสอง แล้วลงตัวหรือไม่ ถ้าลงตัวคือ คู่ ไม่ลงตัวคือคี่

เราจะเอาตัวเเปรไหนมาเช็คครับอย่างตัวล่างเอา$Numberมาเช็ค

<meta charset="UTF-8">
<?PHP
$Number = 3;

if(($Number%2) == 0){
echo "เลขคู่";
}else{
echo "เลขคี่";
}
?>

Golff Sinlapachai · 02/10/2019 8:56 am

ผมเอาตัวนี้มาเช็คไม่รู้ว่าถูกรึป่าวครับ ($(this).text()%2)==0
เเต่มันเช็คตัวสุดท้าย เราจะเช็คว่ากดเลขคู่มาทั้ง 4 ตัวหรือเลขคี่ทั้ง 4 ตัว ยังไงครับ

โค้ด: เลือกทั้งหมด

if (($(this).text()%2)==0) {
     $("#test1,#test2").css("background-color", "yellow");

  }else{
  	 $("#test3").css("background-color", "red");
  }

Golff Sinlapachai · 07/10/2019 10:47 am

ตอนนี้ผมติด2ที่ครับ
ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ ตอนนี้กดมันขึ้นเเต่ช่องเเรกครับ
อีกอย่างพอกดเลข4ครั้งเเล้วมันขึ้นสีพื้นหลัง พอกดครั้งที่ 5 ถ้าเรากดเลขที่ขึ้นสีพื้นหลังให้ขึ้นรูปติ้กถูก ถ้าไม่ได้กดเลขที่มีสีพื้นหลังให้ขึ้นรูปติ้กผิด
พอเขียนประมาณไหนครับ

โค้ด: เลือกทั้งหมด

<!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;


		}

		.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" class="test0"><font color=red>0</font></div>

		<div onclick="myFunction(this)" class="test" id="test2">2</div>

		<div onclick="myFunction(this)" class="test" id="test4">4</div>  
		<div onclick="myFunction(this)" class="test" id="test6"><font color=red>6</font></div>
		<div onclick="myFunction(this)" class="test"><font color=red>8</font></div>
		<div onclick="myFunction(this)" class="test">10</div>
		<div onclick="myFunction(this)" class="test"><font color=red>12</font></div>
		<div onclick="myFunction(this)" class="test"><font color=red>14</font></div>  
		<div onclick="myFunction(this)" class="test">16</div>
		<div onclick="myFunction(this)" class="test"><font color=red>18</font></div>
		<div onclick="myFunction(this)" class="test"><font color=red>20</font></div>
		<div onclick="myFunction(this)" class="test">22</div>
		<div onclick="myFunction(this)" class="test">24</div>
		<div onclick="myFunction(this)" class="test" id="test1">1</div>
		<div onclick="myFunction(this)" class="test" id="test3"><font color=red>3</font></div>
		<div onclick="myFunction(this)" class="test" id="test5">5</div>
		<div onclick="myFunction(this)" class="test">7</div>
		<div onclick="myFunction(this)" class="test"><font color=red>9</font></div>
		<div onclick="myFunction(this)" class="test">11</div>
		<div onclick="myFunction(this)" class="test">13</div>
		<div onclick="myFunction(this)" class="test"><font color=red>15</font></div>
		<div onclick="myFunction(this)" class="test">17</div>
		<div onclick="myFunction(this)" class="test">19</div>
		<div onclick="myFunction(this)" class="test">21</div>
		<div onclick="myFunction(this)" class="test">23</div>

		<!-- <div onClick="onClick()" class="test" id="test1" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">333</div>

		<div  class="test"id="test2" 
		onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';">444</div>
		
		<div class="test"	id="test3" 
		mouseenter="this.style.backgroundColor='yellow';"
		mouseleave="this.style.backgroundColor='lightblue';"
		>555</div> -->

	</div>
	<script>
		myFunction = i => $("#demo1 td:empty:first").html($(i).html())
		var tooClick = 0;
var totalClick = 0; // จำนวนคลิกทั้งหมด
var evenClick = 0; // จำนวนคลิกเลขคู่
var oddClick = 0; // จำนวนคลิกเลขคี่
var result=false;
var backgound="";
var clicks = 0;
var po = 0;
function clickCount()
{
	clicks += 1;    //ตรงนี้ใส่ clicks += 1;
	po = Math.floor(Math.random() * 4);
}

function changBackground()
{
	return backgound = clicks==4 ? "backgound:yellow" : "";
}

function reset()
{
	$(".test").css("background-color", "lightblue");
	$(".test1").css("background-color", "lightblue");
	$(".test2").css("background-color", "lightblue");
	$("#test1").css("background-color", "lightblue");
	$("#test2").css("background-color", "lightblue");
	evenClick=0;
	oddClick=0;
	tooClick=0;
	
	result=false;
	return;
}
function pop() {
	alert("Hello! I am an alert box!");
	window.location.reload();
}

$(function(){
	$(".test").click(function(){

		clickCount();

		document.getElementById("clicks").innerHTML = clicks;
		document.getElementById("demo").innerHTML = $(this).text();
		document.getElementById("ran").innerHTML = po;


		if ($(this).text()%2==0) {
			evenClick++;      //ตรงนี้ใส่ evenClick++; 
			oddClick++;        //ตรงนี้ใส่ oddClick++; 
			if(evenClick % 4 ==0){
				if (po%2==0) {
					$("#test1,#test2").css("background-color", "yellow");
				}else if (po%2==1) {
					$("#test3,#test4").css("background-color", "#80E12A");
				}
			}else if(evenClick % 5 ==0){
				document.getElementById("golf").innerHTML = $(this).text();
				reset();
			}

		}else if ($(this).text()%2==1) {
			oddClick++;          //ตรงนี้ใส่ oddClick++; 
			evenClick++;        //ตรงนี้ใส่ evenClick++; 
			if(oddClick % 4 ==0){
				if (po%2==0) {
					$("#test5,#test6").css("background-color", "#73E1E1");
				}else if (po%2==1) {
					$("#test3,#test4").css("background-color", "#80E12A");
				}
			}else if(oddClick % 5 ==0){
				document.getElementById("golf").innerHTML = $(this).text();
				
				reset();
			}
		}
		if (clicks>60) {
			pop();
		}

	});
});

</script>

<p>Clicks: <a id="clicks">0</a></p>
<p id="demo"></p>
<p>ran: <a id="ran">0</a></p>
</script>
<table class="table" id="demo2" style="background-color:#E6E6E6"  >
	<tr>
		<td>ครั้งที่5</td>
		<td id="golf"></td>
		<td id="golf2"></td>
		<td id="golf3"></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>


</body>
</html>

YouTube · 07/10/2019 11:28 am

ถ้าไม่มีการ refresh หน้า เก็บค่าคลิกแต่ละครั้ง ด้วย javascript โดยการบวกค่าตัวแปลเข้าไป
ถ้า มี refresh หน้า หรือเก็บระยะยาว ใช้ cookie

Golff Sinlapachai · 07/10/2019 11:34 am

mindphp เขียน:ถ้าไม่มีการ refresh หน้า เก็บค่าคลิกแต่ละครั้ง ด้วย javascript โดยการบวกค่าตัวแปลเข้าไป
ถ้า มี refresh หน้า หรือเก็บระยะยาว ใช้ cookie

ไม่ refresh พอจะมีตัวอย่างไหมครับ

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

Re: ผมอยากให้กดปุ่ม 4 ครั้งเเล้วพื้นหลังขึ้นสีเหลืองต้องทำยังไงครับ

ผู้ใช้งานขณะนี้