EP.18 เหยียบไฟแบบเวทีทอง เวทีเธอ

noMerzy | 2016-08-18 12:00:31


goldstate.html <!DOCTYPE html> <html> <head> <title>Gold State</title> <meta charset="UTF-8"> <style> /* สไตล์ของตาราง */ table { border-collapse: collapse; } table tr td { width : 100px; height: 100px; border: 3px solid #999999; } </style> </head> <body> <table> <tr> <td id="1"></td> <td id="2"></td> <td id="3"></td> </tr> <tr> <td id="4"></td> <td id="5"></td> <td id="6"></td> </tr> <tr> <td id="7"></td> <td id="8"></td> <td id="9"></td> </tr> </table> <br> จำนวนครั้งที่กดถูก : <span id="hitStat">0</span> <script> //เพิ่มอีเวนต์ให้ อิลิเมนต์ td elem_td = document.getElementsByTagName('td'); for (i = 0; i < elem_td.length; i++) { //เมื่อกดปุ่มให้เรียกฟังก์ชั่น btnClick elem_td[i].addEventListener('click', btnClick); } //จำนวนครั้งที่กดถูก var hit = 0; //ปุ่มที่กดล่าสุด var lastHit = 0; //ตัวนับเวลาเรียกฟังก์ชั่นสุ่มไฟ var interval = setInterval(randLight, 600); /* * ฟังก์ชั่นสุ่มไฟ */ function randLight() { //สุ่มไฟ 1-9 var rand = Math.floor((Math.random() * 9) + 1); //ลูปตาราง 1-9 for (i = 1; i < 10; i++) { //ถ้าเป็นช่องที่สุ่ม เปลี่ยนพื้นหลังเป็นสีเขียว //ถ้าไม่ใช่ เปลี่ยนพื้นหลังเป็นสีขาว if (i === rand) { document.getElementById(i).style.backgroundColor = 'rgb(85, 221, 85)'; } else { document.getElementById(i).style.backgroundColor = 'rgb(255, 255, 255)'; } } } /* * ฟังก์ชั่นเมื่อทำการคลิ๊ก */ function btnClick() { //ป้องกันการกดปุ่มเดิมรัวๆ if (this.id === lastHit) { return false; } //ถ้าพื้นหลังเป็นสีเขียว if (this.style.backgroundColor === 'rgb(85, 221, 85)') { //เพิ่มจำนวนครั้งที่กดถูก hit++; //อัพเดทจำนวนครั้งที่กดถูก document.getElementById('hitStat').innerHTML = hit; } //เปลี่ยนปุ่มที่กดล่าสุด lastHit = this.id; //ถ้ากดถูกครบ 10 ครั้ง if (hit === 10) { //แสดงข้อความ alert('คุณได้ตอบคำถาม'); //ยกเลิกการสุ่มไฟ clearInterval(interval); //เปลี่ยนพื้นหลังเป็นสีเขียวทั้งหมด for (i = 1; i < 10; i++) { document.getElementById(i).style.backgroundColor = 'rgb(85, 221, 85)'; } } } </script> </body> </html>