ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

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

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ผมจะสร้างสี่เหลี่ยมเป็นเเถว เเล้วพอกดตัวเลขให้ไปอยู่ในสี่เหลี่ยม ได้ยังไงครับ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ผมจะสร้างสีเหลี่ยมเป็นเเถวเเบบนี้ พอกดเลขด้านล่างให้ขึ้นในสี่เหลี่ยมด้านบน เเนะนำหน่อยครับ php

Golff Sinlapachai 17-09-2019 19:23:49

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 11

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

Golff Sinlapachai 02-10-2019 10:37

ความคิดเห็นที่ 12

การกำหนดทิศทางของโปรแกรม จำเป็นต้องมีตัวแปร ของเงื่อนไขนั้นฃ

หากเรามีการนับจำนวนคลิก ต้องมีตัวแปรเก็บจำนวนคลิก ค่าเริ่มต้นเป็น 0 บวกเพิ่มทีละ 1 เมื่อคลิกแต่ละครั้ง

หากจะตรวจสอบว่าคลิกเลขคู่แล้วกี่ครั้ง เลขคี่แล้วกี่ครั้ง เราต้องมีตัวแปรสำหรับเก็บจำนวนเลขคู่ และเลขคี่

เงื่อนไขที่จะบอกว่าเป็นเลขคู่หรือเลขคี่คือ จำนวนคลิก หาร 2 แล้วเหลือเศษ 0 หรือเหลือเศษ 1 ตามลำดับ

และสุดท้าย การหาจำนวนคลิกที่เป็นเลขคู่ หรือเลขคี่ ครั้งที่ 4 ก็ใช้วิธี หาร 4 แล้วเหลือเศษ 0 แนวทางจะประมาณนี้

var totalClick = 0; // จำนวนคลิกทั้งหมด
var evenClick = 0; // จำนวนคลิกเลขคู่
var oddClick = 0; // จำนวนคลิกเลขคี่

click(){ // สมมติเหตุการณ์เมื่อมีการคลิก
   totoalClick++;
   if(totalClick % 2 ==0){
        evenClick++;
   }
   if(totalClick % 2 ==1){
        oddClick++;
   }
    if(evenClick % 4 ==0){

    }
    if(oddClick % 4 ==0){

    }
}

>>> อัพเดท >>> 02-10-2019
------------------------------------------

var totalClick = 0; // จำนวนคลิกทั้งหมด
var evenClick = 0; // จำนวนคลิกเลขคู่
var oddClick = 0; // จำนวนคลิกเลขคี่

click(){ // สมมติเหตุการณ์เมื่อมีการคลิก
   totoalClick++;
   if(totalClick % 2 ==0){
        evenClick++;
        if(evenClick % 4 ==0){

        }
   }
   if(totalClick % 2 ==1){
        oddClick++;
        if(oddClick % 4 ==0){

        }
   }
}

ninenik 02-10-2019

ความคิดเห็นที่ 13

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


 if(num % 2 ==0){                         //ตรงนี้ใช่ใส่ตัวเเปร เลขที่กดมารึป่าวครับเช่นกด 2,3,4,6
        evenClick++;
        if(evenClick % 4 ==0){           //ตรงนี้คือเมื่อกดเลขถึง4ครั้งใช่ไหมครับ
   $("#test1").css("background-color", "yellow");
        } if(evenClick % 5 ==0){          //ตรงนี้คือกดครั้งที่5 รีเช็ตการคลิกครับ
	reset();
}
   }

   if(num % 2 ==1){
        oddClick++;
        if(oddClick % 4 ==0){
   $("#test2").css("background-color", "red");
        }if(oddClick % 5 ==0){
	reset();
}

   }

โค้ดเต็ม

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
		.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 onload="draw();">
	<canvas id="canvas" width="1000" height="150"></canvas>
	<br>
	  <button class="btn1" type="button">1</button>
	  <button class="btn1" type="button">2</button>  
	  <button class="btn1" type="button">3</button><br>
	  <button class="btn1" type="button">4</button>
	  <button class="btn1" type="button">5</button>
	  <button class="btn1" type="button">6</button><br>
	  <button class="btn1" type="button">7</button>
	  <button class="btn1" type="button">8</button>
	  <button class="btn1" type="button">9</button><br>
	<button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>

	<div class="grid-container" style="width: 70%" 
	>
	<div class="btn1" id="item1" 
	onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"
	font color="red">0</div>

	<div class="btn1" 
	onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>

	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">6</div>  
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">15</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>21</font></div>  
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">24</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>27</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
		onMouseout="this.style.backgroundColor='lightblue';"><font color=red>30</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">33</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">36</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">2</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>5</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">8</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">11</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">17</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">20</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>23</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">26</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">29</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>32</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">35</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"
	><font color=red>1</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">4</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>7</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">10</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">13</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>16</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>19</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';">22</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>25</font></div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test1" 
	onMouseout="this.style.backgroundColor='lightblue';">28</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test2" 
	onMouseout="this.style.backgroundColor='lightblue';">31</div>
	<div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test3" 
	onMouseout="this.style.backgroundColor='lightblue';"><font color=red>34</font></div>

</div>
 <p>Clicks: <a id="clicks">0</a></p>
  <p>Num: <a id="demo">0</a></p>

<canvas id="canvas2" width="1100" height="50"></canvas>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
//1 3 5 7 9 12 14 16 18 19 21 23 25 27 30 32 34 36

var result=false;
backgound="";
var clicks = 0;
function clickCount()
{
 clicks += 1;
}



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");
$("#test3").css("background-color", "lightblue");
 clicks=0;
 totalClick = 0;
  evenClick = 0;
  oddClick = 0;
 result=false;
 return;
}
$(function(){
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  var totalClick = 0;
  var evenClick = 0;
  var oddClick = 0;
  
$("#reset").click(function(){
	  draw();
	reset();
  // ค่าเร่ิมต้น
  n = 0;  // ลำดับรายการ
  num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  _x = 17;
  _y = 34;
  // ตำแหน่ง x y ของวงกลม
  _c_x = 25;
  _c_y = 25;      
});

// ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){
	 
    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
	
    if(n!=1 && n%20==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
	      n = 1;
	      _c_x = 25;
	      _c_y+=50;
	       
	      _x = 17;
	      _y+=50;
    }
     
    // กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 23, 0, 2 * Math.PI);
     
    // วาดวงกลมลงใน canvas

if (num==0) {
	    var colorCiclr = "#96F56E";
}else{

	var colorCiclr = (num==1||num==3)?"#C91C1D":"black";
}
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);
 
    // กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
     
    // เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);  


clickCount();
    
    document.getElementById("clicks").innerHTML = clicks;
    document.getElementById("demo").innerHTML = num;
   
   


   if(num % 2 ==0){
        evenClick++;
        if(evenClick % 4 ==0){
   $("#test1").css("background-color", "yellow");
        } if(evenClick % 5 ==0){
	reset();
}
   }

   if(num % 2 ==1){
        oddClick++;
        if(oddClick % 4 ==0){
   $("#test2").css("background-color", "red");
        }if(oddClick % 5 ==0){
	reset();
}

   }
	


   
  });
   
});  


// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
	  var canvas = document.getElementById('canvas');
		
	  if (canvas.getContext) {
		    var ctx = canvas.getContext('2d');
		  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 1000, 150);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    ctx.moveTo(0, 50);
    ctx.lineTo(1000, 50);
    ctx.moveTo(0, 100);
    ctx.lineTo(1000, 100); 
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 150);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 150);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 150);  
ctx.moveTo(200, 0);
    ctx.lineTo(200, 150); 
ctx.moveTo(250, 0);
    ctx.lineTo(250, 150);  
ctx.moveTo(300, 0);
    ctx.lineTo(300, 150); 
ctx.moveTo(350, 0);
    ctx.lineTo(350, 150); 
ctx.moveTo(400, 0);
    ctx.lineTo(400, 150); 
ctx.moveTo(450, 0);
    ctx.lineTo(450, 150);
ctx.moveTo(500, 0);
    ctx.lineTo(500, 150);  
ctx.moveTo(550, 0);
    ctx.lineTo(550, 150);
ctx.moveTo(600, 0);
    ctx.lineTo(600, 150);
ctx.moveTo(650, 0);
    ctx.lineTo(650, 150);
ctx.moveTo(700, 0);
    ctx.lineTo(700, 150);
ctx.moveTo(750, 0);
    ctx.lineTo(750, 150);
ctx.moveTo(800, 0);
    ctx.lineTo(800, 150);
ctx.moveTo(850, 0);
    ctx.lineTo(850, 150);
ctx.moveTo(900, 0);
    ctx.lineTo(900, 150);   
ctx.moveTo(950, 0);
    ctx.lineTo(950, 150); 
    ctx.stroke();   
 
  }
if (canvas2.getContext) {
		    var ctx2 = canvas2.getContext('2d');
		  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(100, 0, 1100, 50);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx2.fillStyle = '#E6E6E6';
    ctx2.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx2.strokeStyle = '#D9D9D9';
    ctx2.lineWidth = 2;
    ctx2.beginPath();
    
	ctx2.font = "30px Arial";
	
	ctx2.fillStyle = "red";
    ctx2.fillText("ครั้งที่ 5", 0, 50);
	
	ctx2.moveTo(100, 0);
    ctx2.lineTo(100, 50);
	ctx2.moveTo(150, 0);
    ctx2.lineTo(150, 50);
	ctx2.moveTo(200, 0);
    ctx2.lineTo(200, 50);
	ctx2.moveTo(250, 0);
    ctx2.lineTo(250, 50);
	ctx2.moveTo(300, 0);
    ctx2.lineTo(300, 50);
	ctx2.moveTo(350, 0);
    ctx2.lineTo(350, 50);
	ctx2.moveTo(400, 0);
    ctx2.lineTo(400, 50);
	ctx2.moveTo(450, 0);
    ctx2.lineTo(450, 50);
	ctx2.moveTo(500, 0);
    ctx2.lineTo(500, 50);
	ctx2.moveTo(550, 0);
    ctx2.lineTo(550, 50);
	ctx2.moveTo(600, 0);
    ctx2.lineTo(600, 50);
	ctx2.moveTo(650, 0);
    ctx2.lineTo(650, 50);
	ctx2.moveTo(700, 0);
    ctx2.lineTo(700, 50);
	ctx2.moveTo(750, 0);
    ctx2.lineTo(750, 50);
    ctx2.moveTo(800, 0);
    ctx2.lineTo(800, 50);
	ctx2.moveTo(850, 0);
    ctx2.lineTo(850, 50);
	ctx2.moveTo(900, 0);
    ctx2.lineTo(900, 50);
	ctx2.moveTo(950, 0);
    ctx2.lineTo(950, 50);
    ctx2.moveTo(1000, 0);
    ctx2.lineTo(1000, 50);
	ctx2.moveTo(1050, 0);
    ctx2.lineTo(1050, 50);
    ctx2.stroke();   
 
  }
}




</script>



</body>


</html>

Golff Sinlapachai 02-10-2019 17:27

ความคิดเห็นที่ 14

พยายามจัดระเบียบโค้ดให้สวยงาม เวลาเขียนโค้ดจะได้ไม่ลายตา ดูบรรทัดที่ highlight เป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        .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 onload="draw();">
    <canvas id="canvas" width="1000" height="150"></canvas>
    <br>
      <button class="btn1" type="button">1</button>
      <button class="btn1" type="button">2</button>  
      <button class="btn1" type="button">3</button><br>
      <button class="btn1" type="button">4</button>
      <button class="btn1" type="button">5</button>
      <button class="btn1" type="button">6</button><br>
      <button class="btn1" type="button">7</button>
      <button class="btn1" type="button">8</button>
      <button class="btn1" type="button">9</button><br>
    <button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>
 
    <div class="grid-container" style="width: 70%"
    >
    <div class="btn1" id="item1"
    onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"
    font color="red">0</div>
 
    <div class="btn1"
    onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>3</font></div>
 
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">6</div>  
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>9</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>12</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">15</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>18</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>21</font></div>  
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">24</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>27</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
        onMouseout="this.style.backgroundColor='lightblue';"><font color=red>30</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">33</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">36</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">2</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>5</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">8</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">11</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>14</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">17</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">20</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>23</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">26</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">29</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>32</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">35</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"
    ><font color=red>1</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">4</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>7</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">10</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">13</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>16</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>19</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';">22</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>25</font></div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test1"
    onMouseout="this.style.backgroundColor='lightblue';">28</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test2"
    onMouseout="this.style.backgroundColor='lightblue';">31</div>
    <div class="btn1"onMouseover="this.style.backgroundColor='yellow';"id="test3"
    onMouseout="this.style.backgroundColor='lightblue';"><font color=red>34</font></div>
 
</div>
 <p>Clicks: <a id="clicks">0</a></p>
  <p>Num: <a id="demo">0</a></p>
 
<canvas id="canvas2" width="1100" height="50"></canvas>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
//1 3 5 7 9 12 14 16 18 19 21 23 25 27 30 32 34 36
 
var result=false;
backgound="";
var clicks = 0;
function clickCount()
{
 clicks += 1;
}
 
 
 
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");
$("#test3").css("background-color", "lightblue");
 clicks=0;
 totalClick = 0;
  evenClick = 0;
  oddClick = 0;
 result=false;
 return;
}
$(function(){
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  
  var totalClick = 0;
  var evenClick = 0;
  var oddClick = 0;
   
$("#reset").click(function(){
      draw();
    reset();
  // ค่าเร่ิมต้น
  n = 0;  // ลำดับรายการ
  num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  _x = 17;
  _y = 34;
  // ตำแหน่ง x y ของวงกลม
  _c_x = 25;
  _c_y = 25;      
});
 
// ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){
      
    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');
     
    if(n!=1 && n%20==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
          n = 1;
          _c_x = 25;
          _c_y+=50;
            
          _x = 17;
          _y+=50;
    }
      
    // กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 23, 0, 2 * Math.PI);
      
    // วาดวงกลมลงใน canvas
 
if (num==0) {
        var colorCiclr = "#96F56E";
}else{
 
    var colorCiclr = (num==1||num==3)?"#C91C1D":"black";
}
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);
  
    // กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
      
    // เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);  
 
 
clickCount();
     
    document.getElementById("clicks").innerHTML = clicks;
    document.getElementById("demo").innerHTML = num;
    
    
 
 
   if(num % 2 ==0){
        evenClick++;
        if(evenClick % 4 ==0){
   $("#test1").css("background-color", "yellow");
        } if(evenClick % 4 ==1){
$("#test1").css("background-color", "lightblue");      
 //   reset();
}
   }
 
   if(num % 2 ==1){
        oddClick++;
        if(oddClick % 4 ==0){
   $("#test2").css("background-color", "red");
        }if(oddClick % 4 ==1){
$("#test2").css("background-color", "lightblue");              
 //   reset();
}
 
   }
     
 
 
    
  });
    
});  
 
 
// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
      var canvas = document.getElementById('canvas');
         
      if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
           
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 1000, 150);
      
    // วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);
  
    // วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
     
    ctx.moveTo(0, 50);
    ctx.lineTo(1000, 50);
    ctx.moveTo(0, 100);
    ctx.lineTo(1000, 100); 
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 150);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 150);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 150);  
ctx.moveTo(200, 0);
    ctx.lineTo(200, 150); 
ctx.moveTo(250, 0);
    ctx.lineTo(250, 150);  
ctx.moveTo(300, 0);
    ctx.lineTo(300, 150); 
ctx.moveTo(350, 0);
    ctx.lineTo(350, 150); 
ctx.moveTo(400, 0);
    ctx.lineTo(400, 150); 
ctx.moveTo(450, 0);
    ctx.lineTo(450, 150);
ctx.moveTo(500, 0);
    ctx.lineTo(500, 150);  
ctx.moveTo(550, 0);
    ctx.lineTo(550, 150);
ctx.moveTo(600, 0);
    ctx.lineTo(600, 150);
ctx.moveTo(650, 0);
    ctx.lineTo(650, 150);
ctx.moveTo(700, 0);
    ctx.lineTo(700, 150);
ctx.moveTo(750, 0);
    ctx.lineTo(750, 150);
ctx.moveTo(800, 0);
    ctx.lineTo(800, 150);
ctx.moveTo(850, 0);
    ctx.lineTo(850, 150);
ctx.moveTo(900, 0);
    ctx.lineTo(900, 150);   
ctx.moveTo(950, 0);
    ctx.lineTo(950, 150); 
    ctx.stroke();   
  
  }
if (canvas2.getContext) {
            var ctx2 = canvas2.getContext('2d');
           
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(100, 0, 1100, 50);
      
    // วาดสี่เหลี่ยมลงใน canvas
    ctx2.fillStyle = '#E6E6E6';
    ctx2.fill(rectangle);
  
    // วาดเส้นตาราง
    ctx2.strokeStyle = '#D9D9D9';
    ctx2.lineWidth = 2;
    ctx2.beginPath();
     
    ctx2.font = "30px Arial";
     
    ctx2.fillStyle = "red";
    ctx2.fillText("ครั้งที่ 5", 0, 50);
     
    ctx2.moveTo(100, 0);
    ctx2.lineTo(100, 50);
    ctx2.moveTo(150, 0);
    ctx2.lineTo(150, 50);
    ctx2.moveTo(200, 0);
    ctx2.lineTo(200, 50);
    ctx2.moveTo(250, 0);
    ctx2.lineTo(250, 50);
    ctx2.moveTo(300, 0);
    ctx2.lineTo(300, 50);
    ctx2.moveTo(350, 0);
    ctx2.lineTo(350, 50);
    ctx2.moveTo(400, 0);
    ctx2.lineTo(400, 50);
    ctx2.moveTo(450, 0);
    ctx2.lineTo(450, 50);
    ctx2.moveTo(500, 0);
    ctx2.lineTo(500, 50);
    ctx2.moveTo(550, 0);
    ctx2.lineTo(550, 50);
    ctx2.moveTo(600, 0);
    ctx2.lineTo(600, 50);
    ctx2.moveTo(650, 0);
    ctx2.lineTo(650, 50);
    ctx2.moveTo(700, 0);
    ctx2.lineTo(700, 50);
    ctx2.moveTo(750, 0);
    ctx2.lineTo(750, 50);
    ctx2.moveTo(800, 0);
    ctx2.lineTo(800, 50);
    ctx2.moveTo(850, 0);
    ctx2.lineTo(850, 50);
    ctx2.moveTo(900, 0);
    ctx2.lineTo(900, 50);
    ctx2.moveTo(950, 0);
    ctx2.lineTo(950, 50);
    ctx2.moveTo(1000, 0);
    ctx2.lineTo(1000, 50);
    ctx2.moveTo(1050, 0);
    ctx2.lineTo(1050, 50);
    ctx2.stroke();   
  
  }
}
 
 
 
 
</script>
 
 
 
</body>
 
 
</html>

ตัวอย่าง DEMO

ninenik 03-10-2019

ความคิดเห็นที่ 15

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

if(num % 2 ==0){
        evenClick++;
        if(evenClick % 4 ==0){
   $("#test1").css("background-color", "yellow");
        } if(evenClick % 4 ==1){                //ตรงนี้คือกดครั้งที่5ใช่ไหมครับ
$("#test1").css("background-color", "lightblue");   
                                                              //ลองใส่evenClick =0;ไม่ได้ครับ

    //reset();
}
   }

Golff Sinlapachai 03-10-2019 09:10

ความคิดเห็นที่ 16

ได้เเล้วครับถามอีกอย่างครับ กดทุก5ครั้งให้เเสดงตารางข้างล่างยังไงครับ
ขอบคุณครับ

Golff Sinlapachai 05-10-2019 17:06

ความคิดเห็นที่ 17

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
		.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 onload="draw();">
	<canvas id="canvas" width="1000" height="150"></canvas>
	<br>
	  <button class="btn1" type="button">1</button>
	  <button class="btn1" type="button">2</button>  
	  <button class="btn1" type="button">3</button><br>
	  <button class="btn1" type="button">4</button>
	  <button class="btn1" type="button">5</button>
	  <button class="btn1" type="button">6</button><br>
	  <button class="btn1" type="button">7</button>
	  <button class="btn1" type="button">8</button>
	  <button class="btn1" type="button">9</button><br>
	<button id="reset" type="button">&nbsp;&nbsp;RESET&nbsp;&nbsp;&nbsp;</button>

	<div class="grid-container" style="width: 70%" 
	>
	<div class="btn1" id="item1" 
	
	font color="red">0</div>

	<div class="btn1" id="test3"><font color=red>3</font></div>
	<div class="btn1" id="test6">6</div>  
	<div class="btn1" id="test9"><font color=red>9</font></div>
	<div class="btn1" id="test12"><font color=red>12</font></div>
	<div class="btn1" id="test15">15</div>
	<div class="btn1" id="test18"><font color=red>18</font></div>
	<div class="btn1" id="test21"><font color=red>21</font></div>  
	<div class="btn1" id="test24">24</div>
	<div class="btn1" id="test27"><font color=red>27</font></div>
	<div class="btn1" id="test30"><font color=red>30</font></div>
	<div class="btn1" id="test33">33</div>
	<div class="btn1" id="test36">36</div>
	<div class="btn1" id="test2">2</div>
	<div class="btn1" id="test5"><font color=red>5</font></div>
	<div class="btn1" id="test8">8</div>
	<div class="btn1" id="test11">11</div>
	<div class="btn1" id="test14"><font color=red>14</font></div>
	<div class="btn1" id="test17">17</div>
	<div class="btn1" id="test20">20</div>
	<div class="btn1" id="test23"><font color=red>23</font></div>
	<div class="btn1" id="test26">26</div>
	<div class="btn1" id="test29">29</div>
	<div class="btn1" id="test32"><font color=red>32</font></div>
	<div class="btn1" id="test35">35</div>
	<div class="btn1" id="test1"><font color=red>1</font></div>
	<div class="btn1" id="test4">4</div>
	<div class="btn1" id="test7"><font color=red>7</font></div>
	<div class="btn1" id="test10">10</div>
	<div class="btn1" id="test13">13</div>
	<div class="btn1" id="test16"><font color=red>16</font></div>
	<div class="btn1" id="test19"><font color=red>19</font></div>
	<div class="btn1" id="test22">22</div>
	<div class="btn1" id="test25"><font color=red>25</font></div>
	<div class="btn1" id="test28">28</div>
	<div class="btn1" id="test31">31</div>
	<div class="btn1" id="test34"><font color=red>34</font></div>

</div>
<p>Clicks: <a id="clicks">0</a></p>
<p>Num: <a id="demo">0</a></p>

<canvas id="canvas2" width="1100" height="100"></canvas>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
//1 3 5 7 9 12 14 16 18 19 21 23 25 27 30 32 34 36
var totalClick = 0;
var evenClick = 0;
var evenClick2 = 0;
var oddClick = 0;
var po = 0;
var result=false;
backgound="";
var clicks = 0;
function clickCount()
{
	clicks += 1;
	po = Math.floor(Math.random() * 4);
}
function pop() {
	alert("Hello! I am an alert box!");
	window.location.reload();
}
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");
	$("#test3").css("background-color", "lightblue");
	$("#test4").css("background-color", "lightblue");
	$("#test5").css("background-color", "lightblue");
	$("#test6").css("background-color", "lightblue");
	$("#test7").css("background-color", "lightblue");
	$("#test8").css("background-color", "lightblue");
	$("#test9").css("background-color", "lightblue");
	$("#test10").css("background-color", "lightblue");
	$("#test11").css("background-color", "lightblue");
	$("#test12").css("background-color", "lightblue");
	$("#test13").css("background-color", "lightblue");
	$("#test14").css("background-color", "lightblue");
	$("#test15").css("background-color", "lightblue");
	$("#test16").css("background-color", "lightblue");
	$("#test17").css("background-color", "lightblue");
	$("#test18").css("background-color", "lightblue");
	$("#test19").css("background-color", "lightblue");
	$("#test20").css("background-color", "lightblue");
	$("#test21").css("background-color", "lightblue");
	$("#test22").css("background-color", "lightblue");
	$("#test23").css("background-color", "lightblue");
	$("#test24").css("background-color", "lightblue");
	$("#test25").css("background-color", "lightblue");
	$("#test26").css("background-color", "lightblue");
	$("#test27").css("background-color", "lightblue");
	$("#test28").css("background-color", "lightblue");
	$("#test29").css("background-color", "lightblue");
	$("#test30").css("background-color", "lightblue");
	$("#test31").css("background-color", "lightblue");
	$("#test32").css("background-color", "lightblue");
	$("#test33").css("background-color", "lightblue");
	$("#test34").css("background-color", "lightblue");
	$("#test35").css("background-color", "lightblue");
	$("#test36").css("background-color", "lightblue");
	
	clicks = 0;
	totalClick = 0;
	evenClick = 0;
	oddClick = 0;
	result=false;
	return;
}

$(function(){
  // ค่าเร่ิมต้น
  var n = 0;  // ลำดับรายการ
  var num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  var _x = 17;
  var _y = 34;
  // ตำแหน่ง x y ของวงกลม
  var _c_x = 25;
  var _c_y = 25;  

$("#reset").click(function(){
	draw();
	reset();
  // ค่าเร่ิมต้น
  n = 0;  // ลำดับรายการ
  num = 0; // ข้อความตัวเลข
  // ตำแหน่ง x y ของข้อความ
  _x = 17;
  _y = 34;
  // ตำแหน่ง x y ของวงกลม
  _c_x = 25;
  _c_y = 25;      
});

// ทดสอบทำคำสั่งเพื่อมีการคลิก
  $(".btn1").click(function(){
	 
	

    n++;  // เพิ่มลำดับรายการ
    num = $(this).text(); // เพิ่มตัวเลขจากค่าที่ส่งมา
    _x = (50*n)-33; // สูตรตำแหน่ง จากพิกัด x ของข้อความ
    console.log(_x);    
    _c_x = 25*((2*n)-1); // สูตรตำแหน่ง จากพิกัด x ของวงกลม
    console.log(_c_x);    
    var ctx = canvas.getContext('2d');


    if(n!=1 && n%20==1){ // สร้างเงื่อนไข เมื่อขึ้นแถวใหม่
	      n = 1;
	      _c_x = 25;
	      _c_y+=50;
	       
	      _x = 17;
	      _y+=50;
    }
     
    // กำหนดรูปแบบการวาดวงกลม
    var circle = new Path2D();
    circle.arc(_c_x, _c_y, 23, 0, 2 * Math.PI);
     
    // วาดวงกลมลงใน canvas

if (num==0) {
	    var colorCiclr = "#96F56E";
}else{

	var colorCiclr = (num==1||num==3)?"#C91C1D":"black";
}
    ctx.fillStyle = colorCiclr;
    ctx.fill(circle);
 
    // กำหนดรูปแบบข้อความ
    ctx.font = '25px tahoma';
    ctx.fillStyle = '#FFFF8D';
     
    // เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx.fillText(num, _x, _y);  

clickCount();
document.getElementById("clicks").innerHTML = clicks;
document.getElementById("demo").innerHTML = num;

if (num%2==0) {
	evenClick++;
	oddClick++;
	if(evenClick % 4 ==0){
		if (po%2==0) {
			$("#test1,#test2,#test3,#test4,#test5,#test6,#test7,#test8,#test9,#test10,#test11,#test12").css("background-color", "yellow");
		}else if (po%2==1) {
			$("#test13,#test14,#test15,#test16,#test17,#test18,#test19,#test20,#test21,#test22,#test23,#test24").css("background-color", "#B2FA5C");
		}
	}else if(evenClick % 5 ==0){
		reset();
	}

}else if (num%2==1) {
	oddClick++;
	evenClick++;
	if(oddClick % 4 ==0){
		if (po%2==0) {
			$("#test25,#test26,#test27,#test28,#test29,#test30,#test31,#test32,#test33,#test34,#test35,#test36").css("background-color", "#FFD0CD");
		}else if (po%2==1) {
			$("#test13,#test14,#test15,#test16,#test17,#test18,#test19,#test20,#test21,#test22,#test23,#test24").css("background-color", "#B2FA5C");
		}
	}else if(oddClick % 5 ==0){

		reset();
	}
}
if (clicks>60) {
	pop();
}

if (clicks%5==0) {
	var ctx2 = canvas2.getContext('2d');


	ctx2.fillStyle = colorCiclr;
	    ctx2.fill(circle);
	 
    // กำหนดรูปแบบข้อความ
    ctx2.font = '25px tahoma';
    ctx2.fillStyle = '#FFFF8D';
     
    // เขียนข้อความ ในที่นี้คืิอตัวแปรตัวเลข
    ctx2.fillText(num, _x, _y);  
}
  });
   
});  


// เมื่ดหน้า page ให้วดตาลรางลองใน canvas
function draw() {
	  var canvas = document.getElementById('canvas');

	  if (canvas.getContext) {
		    var ctx = canvas.getContext('2d');
		  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(0, 0, 1000, 150);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx.fillStyle = '#E6E6E6';
    ctx.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx.strokeStyle = '#D9D9D9';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, 50);
    ctx.lineTo(1000, 50);
    ctx.moveTo(0, 100);
    ctx.lineTo(1000, 100); 
    ctx.moveTo(50, 0);
    ctx.lineTo(50, 150);
    ctx.moveTo(100, 0);
    ctx.lineTo(100, 150);
    ctx.moveTo(150, 0);
    ctx.lineTo(150, 150);  
	ctx.moveTo(200, 0);
    ctx.lineTo(200, 150); 
	ctx.moveTo(250, 0);
    ctx.lineTo(250, 150);  
	ctx.moveTo(300, 0);
    ctx.lineTo(300, 150); 
	ctx.moveTo(350, 0);
    ctx.lineTo(350, 150); 
	ctx.moveTo(400, 0);
    ctx.lineTo(400, 150); 
	ctx.moveTo(450, 0);
    ctx.lineTo(450, 150);
	ctx.moveTo(500, 0);
    ctx.lineTo(500, 150);  
	ctx.moveTo(550, 0);
    ctx.lineTo(550, 150);
	ctx.moveTo(600, 0);
    ctx.lineTo(600, 150);
	ctx.moveTo(650, 0);
    ctx.lineTo(650, 150);
	ctx.moveTo(700, 0);
    ctx.lineTo(700, 150);
	ctx.moveTo(750, 0);
    ctx.lineTo(750, 150);
	ctx.moveTo(800, 0);
    ctx.lineTo(800, 150);
	ctx.moveTo(850, 0);
    ctx.lineTo(850, 150);
	ctx.moveTo(900, 0);
    ctx.lineTo(900, 150);   
	ctx.moveTo(950, 0);
    ctx.lineTo(950, 150); 
    ctx.stroke();   
  }

if (canvas2.getContext) {
	    var ctx2 = canvas2.getContext('2d');
	  
    // กำหนดรูปแบบการวาดสี่เเหลี่ยม 
    var rectangle = new Path2D();
    rectangle.rect(100, 0, 1100, 100);
     
    // วาดสี่เหลี่ยมลงใน canvas
    ctx2.fillStyle = '#E6E6E6';
    ctx2.fill(rectangle);
 
    // วาดเส้นตาราง
    ctx2.strokeStyle = '#D9D9D9';
    ctx2.lineWidth = 2;
    ctx2.beginPath();
	ctx2.font = "30px Arial";
	ctx2.fillStyle = "red";
    ctx2.fillText("ครั้งที่ 5", 0, 40);
	ctx2.fillStyle = "red";
    ctx2.fillText("ถูกผิด", 0, 90);
	ctx2.moveTo(100, 50);
    ctx2.lineTo(1100, 50);
	ctx2.moveTo(100, 0);
    ctx2.lineTo(100, 100);
	ctx2.moveTo(150, 0);
    ctx2.lineTo(150, 100);
	ctx2.moveTo(200, 0);
    ctx2.lineTo(200, 100);
	ctx2.moveTo(250, 0);
    ctx2.lineTo(250, 100);
	ctx2.moveTo(300, 0);
    ctx2.lineTo(300, 100);
	ctx2.moveTo(350, 0);
    ctx2.lineTo(350, 100);
	ctx2.moveTo(400, 0);
    ctx2.lineTo(400, 100);
	ctx2.moveTo(450, 0);
    ctx2.lineTo(450, 100);
	ctx2.moveTo(500, 0);
    ctx2.lineTo(500, 100);
	ctx2.moveTo(550, 0);
    ctx2.lineTo(550, 100);
	ctx2.moveTo(600, 0);
    ctx2.lineTo(600, 100);
	ctx2.moveTo(650, 0);
    ctx2.lineTo(650, 100);
	ctx2.moveTo(700, 0);
    ctx2.lineTo(700, 100);
	ctx2.moveTo(750, 0);
    ctx2.lineTo(750, 100);
    ctx2.moveTo(800, 0);
    ctx2.lineTo(800, 100);
	ctx2.moveTo(850, 0);
    ctx2.lineTo(850, 100);
	ctx2.moveTo(900, 0);
    ctx2.lineTo(900, 100);
	ctx2.moveTo(950, 0);
    ctx2.lineTo(950, 100);
    ctx2.moveTo(1000, 0);
    ctx2.lineTo(1000, 100);
	ctx2.moveTo(1050, 0);
    ctx2.lineTo(1050, 100);
    ctx2.stroke();   
  }
}

</script>
</body>
</html>

Golff Sinlapachai 07-10-2019 09:45

ความคิดเห็นที่ 18

พอกดครั้งที่ 5 เราจะเช็คยังไงครับว่า เรากดตัวเลขที่มีสีหรือไม่มีสีครับ

Golff Sinlapachai 08-10-2019 12:51

ความคิดเห็นที่ 19

ลองดูตัวอย่างจากลิ้งค์นี้เป็นแนวทาง

https://playcode.io/461086

ninenik 09-10-2019

ความคิดเห็นที่ 20

ขอบคุณครับ เราเช็คตรงไหนครับ ไม่ให้เลขมันห่างกัน

Golff Sinlapachai 09-10-2019 19:49

Prev 1 2 3 Next

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน