golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« เมื่อ: 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>
|
|
« แก้ไขครั้งสุดท้าย: 09 ตุลาคม 2019, 10:13:14 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #1 เมื่อ: 17 กันยายน 2019, 15:55:36 » |
|
.
|
|
« แก้ไขครั้งสุดท้าย: 17 กันยายน 2019, 15:56:38 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
AlwaysBlues
Newbie
พลังน้ำใจ: 3
ออฟไลน์
กระทู้: 84
|
|
« ตอบ #2 เมื่อ: 17 กันยายน 2019, 18:21:27 » |
|
เรื่องหน้าตาอยากให้เรียงเเถวคงต้อง css ครับ วนลูปเอา
ส่วนคอนเซ็ปการทำงานทำเป็น array สองตัว เอาค่าจากตัวล่าง ไปใส่ตัวบน
ลองดูเรื่อง array pop , array push ดูครับ
|
|
|
บันทึกการเข้า
|
รับทำเว็บไซต์ ระบบหลังบ้าน ทำใหม่ ทำเพิ่ม เเก้ไขของเดิม เเก้บัค ออกเเบบระบบ ออกแบบฐานข้อมูล เว็บไซต์รองรับหลายขนาดหน้าจอ (Responsive) Angular, React, Vue, Wordpress, HTML, CSS, PHP, NodeJS, Firebase, REST API, MySQL https://parinyadahmi.com
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #3 เมื่อ: 17 กันยายน 2019, 19:16:12 » |
|
เรื่องหน้าตาอยากให้เรียงเเถวคงต้อง css ครับ วนลูปเอา
ส่วนคอนเซ็ปการทำงานทำเป็น array สองตัว เอาค่าจากตัวล่าง ไปใส่ตัวบน
ลองดูเรื่อง array pop , array push ดูครับ
css วนลูปนี่ยังไงครับ พอจะมีตัวอย่างไหมครับ ขอบคุณครับ
|
|
|
บันทึกการเข้า
|
|
|
|
smapan
|
|
« ตอบ #4 เมื่อ: 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>
|
|
|
บันทึกการเข้า
|
|
|
|
CherryX
หัวหน้าแก๊งเสียว
พลังน้ำใจ: 48
ออฟไลน์
กระทู้: 2,052
|
|
« ตอบ #5 เมื่อ: 17 กันยายน 2019, 20:30:36 » |
|
น่าจะเป็นเรื่องของ CSS ขอตามด้วยค่ะ
|
|
|
บันทึกการเข้า
|
***ลายเซ็นสูงเกินขนาด
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #6 เมื่อ: 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> พอจะมีตัวอย่างไหมครับ พอจะมีตัวอย่างไหมครับ
|
|
|
บันทึกการเข้า
|
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #7 เมื่อ: 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>
|
|
« แก้ไขครั้งสุดท้าย: 18 กันยายน 2019, 19:34:25 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
smapan
|
|
« ตอบ #8 เมื่อ: 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>
|
|
« แก้ไขครั้งสุดท้าย: 19 กันยายน 2019, 09:11:52 โดย smapan »
|
บันทึกการเข้า
|
|
|
|
ppttonline
สมุนแก๊งเสียว
พลังน้ำใจ: 16
ออฟไลน์
กระทู้: 686
|
|
« ตอบ #9 เมื่อ: 19 กันยายน 2019, 09:42:40 » |
|
มาเก็บข้อมูลครับ
|
|
|
บันทึกการเข้า
|
|
|
|
My rocket
ก๊วนเสียว
พลังน้ำใจ: 32
ออฟไลน์
กระทู้: 370
|
|
« ตอบ #10 เมื่อ: 20 กันยายน 2019, 03:43:28 » |
|
มาเก็บข้อมูลเป็นประโยชน์ภายภาคหน้า ขอบคุณค่ะ
|
|
|
บันทึกการเข้า
|
❒¹❴บริการ❵❦ ❧①รับยิงโฆษณา Facebook ADS ❴ทุกสาย❵ ❒²❴ขาย❵❦❦ ❧①Account Facebook ปกติ 1-5+ปี ❧②Account Facebook ADS ที่เคยรันโฆษณา ❧③Account Facebook Business ❥Mrs:Pearl Jiraporn ❥Tell:❍⑥⑤−②⑤❍−⑨①❍⑨ ❥IDLine:Pearl_ceo ✠ช่องทางติดต่อหลัก✠
|
|
|
Niphat Chankhachornrat
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 36
|
|
« ตอบ #11 เมื่อ: 20 กันยายน 2019, 05:13:02 » |
|
จด จด จด ครับ ขอบคุณครับ
|
|
|
บันทึกการเข้า
|
สติ๊กเกอร์สะท้อนแสงติดรถบรรทุก และอุปกรณสะท้อนแสงคุณภาพสูงครบวงจร ได้มาตรฐาน UN Regulation No.104 (ECE104) ถูกตามข้อกำหนดกรมการขนส่งทางบก มีสินค้าให้เลือกหลายแบบในราคาถูกที่สุด ส่งฟรีทั่วประเทศ ส่งของทุกวัน ไม่เว้นวันหยุด มีบริการเก็บเงินปลายทาง
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #12 เมื่อ: 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>
|
|
« แก้ไขครั้งสุดท้าย: 30 กันยายน 2019, 14:18:42 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
tangball
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 27
|
|
« ตอบ #13 เมื่อ: 23 กันยายน 2019, 18:40:19 » |
|
ขอตามค่ะ
|
|
|
บันทึกการเข้า
|
|
|
|
bigbikeinfo
ก๊วนเสียว
พลังน้ำใจ: 4
ออฟไลน์
กระทู้: 205
|
|
« ตอบ #14 เมื่อ: 23 กันยายน 2019, 19:01:45 » |
|
css หรือ table ก็ทำได้นา
|
|
|
บันทึกการเข้า
|
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #15 เมื่อ: 23 กันยายน 2019, 19:44:07 » |
|
css หรือ table ก็ทำได้นา
พอจะมีตัวอย่างหรือวิธีเเนะนำไหมครับ ผมหาวิธีทำหรือตัวอย่างไม่เจอเลยครับ
|
|
« แก้ไขครั้งสุดท้าย: 24 กันยายน 2019, 08:14:45 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #16 เมื่อ: 25 กันยายน 2019, 08:11:30 » |
|
ช่วยหน่อยครับงมมาหลายวันละ
|
|
|
บันทึกการเข้า
|
|
|
|
smapan
|
|
« ตอบ #17 เมื่อ: 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 ... ลองเลือกตามที่ถนัดนะครับ ผมมันคนรุ่นเก่าต้องปรับตัวให้มากๆเหมือนกัน
|
|
« แก้ไขครั้งสุดท้าย: 25 กันยายน 2019, 08:56:56 โดย smapan »
|
บันทึกการเข้า
|
|
|
|
golf1122
Newbie
พลังน้ำใจ: 0
ออฟไลน์
กระทู้: 34
|
|
« ตอบ #18 เมื่อ: 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>
|
|
« แก้ไขครั้งสุดท้าย: 30 กันยายน 2019, 14:15:26 โดย golf1122 »
|
บันทึกการเข้า
|
|
|
|
smapan
|
|
« ตอบ #19 เมื่อ: 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> ลองดูนะ ถ้านับได้ จะทำอะไรก็ได้
|
|
|
บันทึกการเข้า
|
|
|
|
|