ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: golf1122 ที่ 17 กันยายน 2019, 15:49:47



หัวข้อ: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: golf1122 ที่ 17 กันยายน 2019, 15:49:47
ตอนนี้ผมติดอยู่2ที่ครับ
พอกดเลข4ครั้งเเล้วมันขึ้นสีพื้นหลัง พอกดครั้งที่5 ถ้าเรากดเลขที่ขึ้นสีพื้นหลังให้ขึ้นรูปติ้กถูก ถ้าไม่ได้กดเลขที่มีสีพื้นหลังให้ขึ้นรูปติ้กผิด

ถ้ากดตัวเลขทุก 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=#84FB84>0</font></div>

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

<div onclick="myFunction(this)" class="test1" id="test4">4</div> 
<div onclick="myFunction(this)" class="test1" id="test6"><font color=red>6</font></div>
<div onclick="myFunction(this)" class="test1"><font color=red>8</font></div>
<div onclick="myFunction(this)" class="test2">10</div>
<div onclick="myFunction(this)" class="test2"><font color=red>12</font></div>
<div onclick="myFunction(this)" class="test2"><font color=red>14</font></div> 
<div onclick="myFunction(this)" class="test2">16</div>
<div onclick="myFunction(this)" class="test3"><font color=red>18</font></div>
<div onclick="myFunction(this)" class="test3"><font color=red>20</font></div>
<div onclick="myFunction(this)" class="test3">22</div>
<div onclick="myFunction(this)" class="test3">24</div>
<div onclick="myFunction(this)" class="test1" id="test1">1</div>
<div onclick="myFunction(this)" class="test1" id="test3"><font color=red>3</font></div>
<div onclick="myFunction(this)" class="test1" id="test5">5</div>
<div onclick="myFunction(this)" class="test1">7</div>
<div onclick="myFunction(this)" class="test2"><font color=red>9</font></div>
<div onclick="myFunction(this)" class="test2">11</div>
<div onclick="myFunction(this)" class="test2">13</div>
<div onclick="myFunction(this)" class="test2"><font color=red>15</font></div>
<div onclick="myFunction(this)" class="test3">17</div>
<div onclick="myFunction(this)" class="test3">19</div>
<div onclick="myFunction(this)" class="test3">21</div>
<div onclick="myFunction(this)" class="test3">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() * 10)   1);
}

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

function t1()
{
po=0;
document.getElementById("t1").innerHTML = $(this).text();
}
function t2()
{
po=1;
document.getElementById("t2").innerHTML = $(this).text();
}

function reset()
{
$(".test0").css("background-color", "lightblue");
$(".test1").css("background-color", "lightblue");
$(".test2").css("background-color", "lightblue");
$(".test3").css("background-color", "lightblue");
evenClick=0;
oddClick=0;
tooClick=0;
ma='';

clicks=0;
result=false;
return;
}
function pop() {
alert("Hello! I am an alert box!");
window.location.reload();
}

$(function(){
$(".test0,.test1,.test2,.test3").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").css("background-color", "yellow");


}

if (po%2==1) {


$(".test3").css("background-color", "#80E12A");



}

}else if(oddClick % 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) {
$(".test2").css("background-color", "red");
}else if (po%2==1) {
$(".test3").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>
<p>ma: <a id="ma">0</a></p>
<p>r1: <a id="r1">0</a></p>
<p>r2: <a id="r2">0</a></p>
<p>r3: <a id="r3">0</a></p>
<p>r4: <a id="r4">0</a></p>
<p>t1: <a id="t1">0</a></p>
<p>t2: <a id="t2">0</a></p>
</script>
<table class="table" id="demo2" style="background-color:#E6E6E6"  >
<tr>
<td>ครั้งที่5</td>
<td id="golf"></td>
<td id="golf"></td>
<td id="golf"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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 id="yes"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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 id="no" ></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 17 กันยายน 2019, 15:55:36
.


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: AlwaysBlues ที่ 17 กันยายน 2019, 18:21:27
เรื่องหน้าตาอยากให้เรียงเเถวคงต้อง css ครับ วนลูปเอา

ส่วนคอนเซ็ปการทำงานทำเป็น array สองตัว
เอาค่าจากตัวล่าง ไปใส่ตัวบน 

ลองดูเรื่อง array pop , array push ดูครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 17 กันยายน 2019, 19:16:12
เรื่องหน้าตาอยากให้เรียงเเถวคงต้อง css ครับ วนลูปเอา

ส่วนคอนเซ็ปการทำงานทำเป็น array สองตัว
เอาค่าจากตัวล่าง ไปใส่ตัวบน 

ลองดูเรื่อง array pop , array push ดูครับ

css วนลูปนี่ยังไงครับ พอจะมีตัวอย่างไหมครับ ขอบคุณครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: smapan ที่ 17 กันยายน 2019, 19:51:39
canvas
โค๊ด:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: CherryX ที่ 17 กันยายน 2019, 20:30:36
น่าจะเป็นเรื่องของ CSS ขอตามด้วยค่ะ  :wanwan017:


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 18 กันยายน 2019, 10:16:51
canvas
โค๊ด:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
พอจะมีตัวอย่างไหมครับ
พอจะมีตัวอย่างไหมครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 18 กันยายน 2019, 19:11:28
ช่วยหน่อยครับ ผมจะให้กดเลขเเล้วให้มันเเสดงในกรอบต้องทำยังไงครับ

ถ้าเรากดเลขข้างล่าง ก็จะรันในสีเหลี่ยมด้านบนไปเรื่อยๆครับ

โค๊ด:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form action="" method ="post" name="MyForm" >

<input  type="submit" name="submit" id="submit"  value="ตกลง">

<div class="Analysis">
<table style="width:100%">
<tr>
<td id="demo1"></td>
<td id="resultroulette-0-0"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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>

</form>

<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "1";

}
</script>

<div class="flex-container">
<div><p value="2"  onclick="myFunction()" >1</p></div>
<div><p  onclick="myFunction()">2</p></div>
<div><p  onclick="myFunction()">3</p></div>
<div><p  onclick="myFunction()">4</p></div>
<div><p  onclick="myFunction()">5</p></div>
<div><p  onclick="myFunction()">6</p></div>
<div><p  onclick="myFunction()">7</p></div>
<div><p  onclick="myFunction()">8</p></div>
<div><p  onclick="myFunction()">9</p></div>
</div>

</body>
</html>



อันนี้ style ครับ

โค๊ด:
<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: 41px;
height: 43px;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
    height: 100px;
  text-align: center;
 
  font-size: 30px;
}

.flex-container1 {
margin-top: 100px;
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container1 > div {
  background-color: #f1f1f1;
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
 
  font-size: 30px;
}

</style>


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยัง
เริ่มหัวข้อโดย: smapan ที่ 19 กันยายน 2019, 09:10:46
คร่าวๆประมาณนี้
โค๊ด:
<!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">
</head>
<body>
    <form action="" method ="post" name="MyForm" >
<input  type="submit" name="submit" id="submit"  value="ตกลง">
<div class="Analysis">
<table class="table" id="demo1">
<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>

</form>
<div class="flex-container">
<div><p value="2" onclick="myFunction(this)" >1</p></div>
<div><p onclick="myFunction(this)">2</p></div>
<div><p onclick="myFunction(this)">3</p></div>
<div><p onclick="myFunction(this)">4</p></div>
<div><p onclick="myFunction(this)">5</p></div>
<div><p onclick="myFunction(this)">6</p></div>
<div><p onclick="myFunction(this)">7</p></div>
<div><p onclick="myFunction(this)">8</p></div>
<div><p onclick="myFunction(this)">9</p></div>
</div>
<script>
const myFunction = i => $("#demo1 td:empty:first").html($(i).html())
</script>
</body>
</html>


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: ppttonline ที่ 19 กันยายน 2019, 09:42:40
มาเก็บข้อมูลครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: My rocket ที่ 20 กันยายน 2019, 03:43:28
     มาเก็บข้อมูลเป็นประโยชน์ภายภาคหน้า
     ขอบคุณค่ะ 
   
      :wanwan017:


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: Niphat Chankhachornrat ที่ 20 กันยายน 2019, 05:13:02
จด จด จด ครับ ขอบคุณครับ :wanwan017:


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 23 กันยายน 2019, 10:00:04
ถามต่ออีกหน่อยครับ
ถ้ากดตัวเลขทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่1
เหมือนเราเอาเม้าส์ชี้ที่ตัวเลขครับ
เเล้วพอกดครั้งที่ 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>
<form action="" method ="post" name="MyForm" >
<input  type="submit" name="submit" id="submit"  value="ตกลง">

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



</form>
<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>3</font></div>

<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">6</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';"><font color=red>12</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">15</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>21</font></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';"><font color=red>27</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>30</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">33</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">36</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">2</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>5</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">8</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';"><font color=red>14</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';">20</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>23</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">26</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">29</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>32</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">35</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>1</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>7</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';">13</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>16</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>19</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';"><font color=red>25</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">28</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">31</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>34</font></div>

</div>
<script>
const myFunction = i => $("#demo1 td:empty:first").html($(i).html())
</script>
<table class="table" id="demo1" 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>
<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>

(https://sv1.picz.in.th/images/2019/09/23/c9i4JR.png)


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: tangball ที่ 23 กันยายน 2019, 18:40:19
ขอตามค่ะ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: bigbikeinfo ที่ 23 กันยายน 2019, 19:01:45
css หรือ table ก็ทำได้นา


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 23 กันยายน 2019, 19:44:07
css หรือ table ก็ทำได้นา

พอจะมีตัวอย่างหรือวิธีเเนะนำไหมครับ ผมหาวิธีทำหรือตัวอย่างไม่เจอเลยครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 25 กันยายน 2019, 08:11:30
ช่วยหน่อยครับงมมาหลายวันละ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยัง
เริ่มหัวข้อโดย: smapan ที่ 25 กันยายน 2019, 08:54:48
ช่วยหน่อยครับงมมาหลายวันละ

ลองดูตัวอย่างนี้นะ
https://codepen.io/n7best/pen/EtFcH

พยายามคิดว่าถ้าทำอย่างนี้ต้องย้าย หรือเลือก ข้อมูลอะไรยังไง แล้วไปค้นดู ที่ เว็บjquery ถ้ามี function ก็ลุยเลยถ้าไม่มีก็ค่อยๆเอาโค้ดมารวมกันสร้างเป้น function ของเราเอง

หัดเขียนง่ายๆก่อน https://www.w3schools.com/jquery/

ตอนนี้หลายท่านเริ่มใช้ lib ตัวอื่นๆที่ไม่ใช่ jquery เช่น vue,react 9ล9 ...
ลองเลือกตามที่ถนัดนะครับ ผมมันคนรุ่นเก่าต้องปรับตัวให้มากๆเหมือนกัน


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 27 กันยายน 2019, 10:02:12
พอจะเขียนเค้าโครงได้ไหมครับผมลองเเล้วไม่ได้
ยังติดตรงนี้อยู่เลยครับ

ถ้ากดตัวเลขทุก 4 ครั้ง ให้มันโชว์พื้นหลังสีเหลืองกรอบที่1 (1,2,3,4,5,6,7,8,9,10,11,12)
เหมือนเราเอาเม้าส์ชี้ที่ตัวเลขครับ
เเล้วพอกดครั้งที่ 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>
<form action="" method ="post" name="MyForm" >
<input  type="submit" name="submit" id="submit"  value="ตกลง">

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



</form>
<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>3</font></div>

<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">6</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';"><font color=red>12</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">15</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>21</font></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';"><font color=red>27</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>30</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">33</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">36</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">2</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>5</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">8</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';"><font color=red>14</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';">20</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>23</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">26</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">29</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>32</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">35</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>1</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>7</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';">13</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>16</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>19</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';"><font color=red>25</font></div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">28</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';">31</div>
<div onclick="myFunction(this)"
onMouseover="this.style.backgroundColor='yellow';"
onMouseout="this.style.backgroundColor='lightblue';"><font color=red>34</font></div>

</div>
<script>
const myFunction = i => $("#demo1 td:empty:first").html($(i).html())
</script>
<table class="table" id="demo1" 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>
<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>


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: smapan ที่ 27 กันยายน 2019, 12:09:35
โค๊ด:
<!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>
    <script>
        $(() => { // you can wrap it here with in document ready block
            let round = click = 0
            $("p").click(() => {
                click 
                $('#r').val(click)
                if (click % 4 === 0) {
                    $('#r').val('ตัวเลขทุก 4 ครั้ง รอบที่ '   round  )
                    click = 0
                }
            })
        })
    </script>
</head>

<body>
    <p>อะไรสักอย่าง กด ตรงนี้เบาๆ ตัวหนังสือนี่แหละ คลิกเลย</p>
    <input type="button" id="r" value="0">
</body>

</html>

 :P
ลองดูนะ ถ้านับได้ จะทำอะไรก็ได้


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 27 กันยายน 2019, 12:28:28
โค๊ด:
<!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>
    <script>
        $(() => { // you can wrap it here with in document ready block
            let round = click = 0
            $("p").click(() => {
                click 
                $('#r').val(click)
                if (click % 4 === 0) {
                    $('#r').val('ตัวเลขทุก 4 ครั้ง รอบที่ '   round  )
                    click = 0
                }
            })
        })
    </script>
</head>

<body>
    <p>อะไรสักอย่าง กด ตรงนี้เบาๆ ตัวหนังสือนี่แหละ คลิกเลย</p>
    <input type="button" id="r" value="0">
</body>

</html>

 :P
ลองดูนะ ถ้านับได้ จะทำอะไรก็ได้

กดเเล้วเงียบกริบเลยครับ :wanwan017:


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 28 กันยายน 2019, 16:19:10
 ช่วยหน่อยครับยังติดอยู่ที่เดิมอยู่เลย
:-X


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 30 กันยายน 2019, 08:39:25
ผมลองเเล้วไม่ได้ครับช่วยหน่อยครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: dekdoo ที่ 30 กันยายน 2019, 08:41:59
ผมลองเเล้วไม่ได้ครับช่วยหน่อยครับ

จ้างทำเหอะครับ


หัวข้อ: Re: ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ยังไงครับ php
เริ่มหัวข้อโดย: golf1122 ที่ 01 ตุลาคม 2019, 13:30:02
ตอนนี้ผมติดอยู่2ที่ครับ
พอกดเลข4ครั้งเเล้วมันขึ้นสีพื้นหลัง พอกดครั้งที่5 ถ้าเรากดเลขที่ขึ้นสีพื้นหลังให้ขึ้นรูปติ้กถูก ถ้าไม่ได้กดเลขที่มีสีพื้นหลังให้ขึ้นรูปติ้กผิด

ถ้ากดตัวเลขทุก 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>

เเก้ในโค้ดมันไม่ขึ้น  บวก
clicks  บวก= 1;
evenClick  บวกบวก];      
oddClick  บวกบวก;


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: golf1122 ที่ 08 ตุลาคม 2019, 12:53:18
พอเราจะกดครั้งที่ 5 เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
(https://sv1.picz.in.th/images/2019/10/08/csqf50.md.png)


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: smapan ที่ 11 ตุลาคม 2019, 16:49:37
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: golf1122 ที่ 11 ตุลาคม 2019, 18:45:38
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");

อันนี้ได้เเล้วครับ
ตอนนี้เเต่ติดที่ กดครั้งที่ 5 มันเเสดงเเต่ช่องเเรกครับ ทำยังไงให้มันเเสดงช่องต่อไปเรื่อยๆครับ


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: smapan ที่ 11 ตุลาคม 2019, 20:14:28
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");

อันนี้ได้เเล้วครับ
ตอนนี้เเต่ติดที่ กดครั้งที่ 5 มันเเสดงเเต่ช่องเเรกครับ ทำยังไงให้มันเเสดงช่องต่อไปเรื่อยๆครับ

change index


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: golf1122 ที่ 12 ตุลาคม 2019, 08:46:07
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");

อันนี้ได้เเล้วครับ
ตอนนี้เเต่ติดที่ กดครั้งที่ 5 มันเเสดงเเต่ช่องเเรกครับ ทำยังไงให้มันเเสดงช่องต่อไปเรื่อยๆครับ

change index

ใส่ยังไงครับ พอจะมีตัวอย่างไหม ผมลองหาเเล้วไม่เจอเลย


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: smapan ที่ 15 ตุลาคม 2019, 09:47:10
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");

อันนี้ได้เเล้วครับ
ตอนนี้เเต่ติดที่ กดครั้งที่ 5 มันเเสดงเเต่ช่องเเรกครับ ทำยังไงให้มันเเสดงช่องต่อไปเรื่อยๆครับ

change index

ใส่ยังไงครับ พอจะมีตัวอย่างไหม ผมลองหาเเล้วไม่เจอเลย

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_element
cars[0];
cars[1];
cars[2];


หัวข้อ: Re: ถ้ากดตัวเลขทุก 5 ครั้ง ให้มันเเสดงที่ตารางล่างยังไงครับ
เริ่มหัวข้อโดย: golf1122 ที่ 15 ตุลาคม 2019, 11:03:00
เราจะเช็คยังไงครับว่า  เรากดตัวเลขที่มีสีหรือไม่มีสีครับ
>>
โค๊ด:
var theColorIs = $('a').css("color");

อันนี้ได้เเล้วครับ
ตอนนี้เเต่ติดที่ กดครั้งที่ 5 มันเเสดงเเต่ช่องเเรกครับ ทำยังไงให้มันเเสดงช่องต่อไปเรื่อยๆครับ

ได้เเล้วครับขอบคุณครับ

change index

ใส่ยังไงครับ พอจะมีตัวอย่างไหม ผมลองหาเเล้วไม่เจอเลย

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_element
cars[0];
cars[1];
cars[2];
ได้เเล้วครับขอบคุณครับ :wanwan017: