Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ถามเรื่องการกดปุ่ม เราจะเช็คยังไงว่ากดปุ่มนี้ไปกี่ครังยังไงครับ

ถามเรื่องการกดปุ่ม เราจะเช็คยังไงว่ากดปุ่มนี้ไปกี่ครังยังไงครับ

เริ่มหัวข้อใหม่

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

เราจะเช็คว่ากดปุ่มนี้ไปกี่ครังยังไงครับ

ผมอยากให้กดเลขอะไรก็ได้4ครั้งเเล้วให้ตัวเลขในกรอบดำ 1 2 3 4 5 6 7 8 ขึ้นพื้นหลังสีเหลือง เหมือนเราเอาเม้าส์ชี้ครับ

เเล้วพอกดครั้งที่ 5 พื้นหลังสีเหลืองก็หาย เเล้วเลขที่กดครั้งที่ 5 ให้เเสดงด้านล่างด้วย

ขอคำเเนะนำหน่อยครับ

Code (PHP)

<!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)" 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>
		
<input type="button" class="button" name="tt" value="555555">

</body>
</html>

Tag : PHP, HTML, CSS, JavaScript

ประวัติการแก้ไข
2019-09-25 09:51:45
2019-09-25 09:52:40

Date : 2019-09-25 09:44:10

By : 1768876979829526

View : 695

Reply : 12

No. 1

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 8 )

https://stackoverflow.com/questions/22402777/html-javascript-button-click-counter
https://codepen.io/juliogcampos/pen/BzdjwY

Date : 2019-09-25 10:16:13

By : mr.v

No. 2

Mongkon.k

โพสกระทู้ ( 3,847 )
บทความ ( 0 )

ประมาณนี้ ไปทำต่อเองนะครับ
Code (JavaScript)

var counter=0;
var result=false;
backgound="";
function clickCount()
{
 return counter++;
}

function changBackground()
{
 return backgound = counter==5 ? "backgound:yellow" : "";
}

function reset()
{
 counter=0;
 result=false;
 return;
}

$(function(){
  $("btn").click(function(){
    clickCount();
    if(counter==5){
    $("#object_id").attr("style",background);
    reset();
    }
  });
});

Date : 2019-09-25 10:28:15

By : mongkon.k

No. 3

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : mr.v เมื่อวันที่ 2019-09-25 10:16:13
ขอบคุณครับ

ตอบความคิดเห็นที่ : 2 เขียนโดย : mongkon.k เมื่อวันที่ 2019-09-25 10:28:15

รายละเอียดของการตอบ ::

ขอบคุณครับ

ประวัติการแก้ไข
2019-09-25 10:35:31

Date : 2019-09-25 10:35:05

By : 1768876979829526

No. 4

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 2 เขียนโดย : mongkon.k เมื่อวันที่ 2019-09-25 10:28:15

รายละเอียดของการตอบ ::

มันต้องเเก้ไหนบ้างครับทำไมลองเเล้วไม่ได้

Date : 2019-09-27 08:09:41

By : 1768876979829526

No. 5

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ช่วยหน่อยครับลองเเล้วไม่ได้

Date : 2019-09-30 08:59:16

By : 1768876979829526

No. 6

Mongkon.k

โพสกระทู้ ( 3,847 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 5 เขียนโดย : 1768876979829526 เมื่อวันที่ 2019-09-30 08:59:16

รายละเอียดของการตอบ ::

ไหน code ที่ทำไว้ครับ

Date : 2019-09-30 10:26:50

By : mongkon.k

No. 7

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 6 เขียนโดย : mongkon.k เมื่อวันที่ 2019-09-30 10:26:50

รายละเอียดของการตอบ ::

ติดอยู่นี่ครับ
กดทุกครั้งที่5ได้เเล้วครับ เเล้วเราจะให้มันเเสดงตารางข้างล่างยังไงครับตอนนี้มันเเสดงเฉพาะตารางเเรก

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>


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

ประวัติการแก้ไข
2019-09-30 10:36:22
2019-09-30 18:32:02
2019-09-30 18:32:09
2019-09-30 19:13:02
2019-09-30 19:17:10
2019-10-01 11:31:20
2019-10-02 13:40:53
2019-10-07 10:02:47

Date : 2019-09-30 10:35:50

By : 1768876979829526

No. 8

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 6 เขียนโดย : mongkon.k เมื่อวันที่ 2019-09-30 10:26:50

รายละเอียดของการตอบ ::

ทำกด4ครั้งให้ขึ้นพื้นหลังได้เเล้ว
ตอนนี้ติดอยู่ที่ ถ้ากดเลขคู่4ครั้งให้ขึ้นพื้นหลังสีเหลืองที่เลข 1,2,3,4,5,6,7,8

เราจะเช็คยังไงครับว่าเลขที่กดเป็นเลขคู่ทั้ง4ตัวหรือเลขคี่ทั้ง4ตัวครับ ตอนนี้มันเช็คเเต่ตัวสุดท้าย
ขอบคุณครับ

ประวัติการแก้ไข
2019-10-01 14:14:53
2019-10-01 17:03:04
2019-10-02 08:17:20
2019-10-02 13:47:13

Date : 2019-10-01 11:33:12

By : 1768876979829526

No. 9

Mongkon.k

โพสกระทู้ ( 3,847 )
บทความ ( 0 )

Code (JavaScript)

var number=21;

if(number%2==0){
  alert("เลขคู่");
}else{
  alert("เลขคี่");
}

Date : 2019-10-03 14:30:45

By : mongkon.k

No. 10

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 9 เขียนโดย : mongkon.k เมื่อวันที่ 2019-10-03 14:30:45

รายละเอียดของการตอบ ::

ถ้ากดมาทั้งเลขคู่เลขคี่ละครับ

Date : 2019-10-03 15:53:24

By : 1768876979829526

No. 11

Mongkon.k

โพสกระทู้ ( 3,847 )
บทความ ( 0 )

เช็คทีละตัวครับ

Date : 2019-10-04 11:53:02

By : mongkon.k

No. 12

Golff

โพสกระทู้ ( 43 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 11 เขียนโดย : mongkon.k เมื่อวันที่ 2019-10-04 11:53:02

รายละเอียดของการตอบ ::

กดทุกครั้งที่5ได้เเล้วครับ เเล้วเราจะให้มันเเสดงตารางข้างล่างยังไงครับตอนนี้มันเเสดงเฉพาะตารางเเรก

ประวัติการแก้ไข
2019-10-07 10:01:46

Date : 2019-10-05 17:03:29

By : 1768876979829526

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ถามเรื่องการกดปุ่ม เราจะเช็คยังไงว่ากดปุ่มนี้ไปกี่ครังยังไงครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก