EP.23 ฝึกพิมพ์ดีด

noMerzy | 2016-09-22 10:55:50

ฝึกพิมพ์ดีด


วิธีการเล่น
1.โปรแกรมจะสุ่มอักษรจำนวน 8 ตัว 
2.ผู้เล่นต้องพิมพ์ให้ทันภายใน 10 วินาที

typing.html
<!DOCTYPE html> <html> <head> <title>ฝึกพิมพ์ดีด</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin-bottom: 30px; font-size: 50px; } body{ background-color: #000; color: #fff; } #input { text-align: center; } #time { background-color: #fff; height:30px; } </style> </head> <body> <center> <div id="time"></div> <div id="word"></div> <input type="text" id="input"> <div>คะแนน : <span id="score">0</span>/<span id="total">0</span></div> </center> <script> //เวลารอบละ 10 วินาที var time = 10; //ตัวนับเวลาการจับเวลา var interval = setInterval(timeCount, 1000); randText(); /* * ฟังก์ชั่นสุ่มตัวอักษร */ function randText() { //เมื่อมีการสุ่มให้นับเวลาเป้น 10 วินาทีใหม่ time = 10; //เลขสุ่ม var rand = 0; //คำตัวอย่าง var text = ''; //สร้างตัวอักษร 8 ตัว for (i = 0; i < 8; i++) { //สุ่มตัวเลขรหัสภาษาไทยตั้งแต่ 3585 - 3673 //Math.floor(Math.random()*(max-min+1)+min) rand = Math.floor((Math.random() * 56) + 3585); text += String.fromCharCode(rand); } //นำคำที่ได้ไปแสดง var word = document.getElementById('word'); word.innerHTML = text; //จำนวนคำทั้งหมด var total = parseInt(document.getElementById('total').innerHTML); document.getElementById('total').innerHTML = total + 1; } /* * ฟังก์ชั่นจับเวลา */ function timeCount() { //ลดเวลาลง 1 วินาที time--; //ถ้าเวลาเท่ากับ 0 if (time === 0) { //ให้อินพุตเป็นค่าว่าง document.getElementById('input').value = ''; //สุ่มคำใหม่ randText(); } //แสดงแถบเวลา document.getElementById('time').style.width = time * 10 + '%'; } //กำหนดอีเวนต์การกดปุ่ม document.addEventListener('keydown', key, false); function key(e) { //ถ้ากด enter if (e.keyCode === 13 || document.getElementById('input').value.length === 8) { //คำตัวอย่าง var word = document.getElementById('word').innerHTML; //คำที่พิมพ์ var input = document.getElementById('input').value; //ถ้าพิมพ์ถูก if (input === word) { //เพิ่ม 1 คะแนน var score = parseInt(document.getElementById('score').innerHTML); document.getElementById('score').innerHTML = score + 1; //สุ่มคำใหม่ randText(); } //ให้อินพุตเป็นค่าว่าง document.getElementById('input').value = ''; } } </script> </body> </html>