EP.22 เชิญหมายเลข

noMerzy | 2016-09-19 10:07:59

โปรแกรมคิว

queue.html
<!DOCTYPE html> <html> <head> <title>Queue</title> <style> body { background-color: #000; color: #fff; } #number { width: 100%; height: 100%; text-align: center; font-size: 600px; } #controlPanel { position: fixed; bottom: 0; right: 0; background-color: #f1f1f1; color:#000; padding: 8px; } #now { width: 50px; } </style> </head> <body> <!-- แสดงหมายเลขปัจจุบัน --> <div id="number">0</div> <!-- แผงควบคุม --> <div id="controlPanel"> <input type="button" id="prev" value="<" onclick="prev()"> <input type="text" id="now" value="0"> <input type="button" id="next" value=">" onclick="next()"> <input type="button" id="call" value="call" onclick="call()"> </div> <script> /* * ฟังก์ชั่นเมื่อกดปุ่มย้อนหลัง */ function prev() { //ดึงค่าหมายเลขปัจจุบัน var number = parseInt(document.getElementById('now').value); //ลดจำนวนหมายเลขลง1 document.getElementById('now').value = number - 1; document.getElementById('number').innerHTML = number - 1; //ทำการเรียก 2 ครั้ง sound(2); } /* * ฟังก์ชั่นเมื่อกดปุ่มถัดไป */ function next() { //ดึงค่าหมายเลขปัจจุบัน var number = parseInt(document.getElementById('now').value); //เพิ่มจำนวนหมายเลขขึ้น1 document.getElementById('now').value = number + 1; document.getElementById('number').innerHTML = number + 1; //ทำการเรียก 2 ครั้ง sound(2); } /* * ฟังก์ชั่นเมื่อกดปุ่มเรียก */ function call() { //ดึงค่าหมายเลขปัจจุบัน var number = parseInt(document.getElementById('now').value); //แสดงผลหมายเลข document.getElementById('number').innerHTML = number; //ทำการเรียก 2 ครั้ง sound(2); } /* * ฟังก์ชั่นเรียก * @param int times จำนวนครั้งที่ต้องการเล่น */ function sound(times) { //ดึงค่าหมายเลขปัจจุบัน var number = document.getElementById('number').innerHTML; //เสียงเชิญหมายเลข var invate = new Audio('sound/invate.mp3'); //เล่นเสียงเชิญหมายเลข invate.play(); //ถ้าเป็นเลข 2 หลัก if (number.length === 2) { //หน่วงเวลาเล่นเสียง 1.5 วินาที รอให้เล่นเสียงเชิญหมายเลขจบก่อน setTimeout(function () { //หมายเลขตัวแรก var firstNumb = new Audio('sound/' + number.charAt(0) + '.mp3'); //เล่นเสียงหมายเลขตัวแรก firstNumb.play(); //หน่วงเวลาเล่นเสียง 1 วินาที รอให้เล่นเสียงหมายเลขตัวแรกจบก่อน setTimeout(function () { //หมายเลขตัวที่สอง var secondNumb = new Audio('sound/' + number.charAt(1) + '.mp3'); //เล่นเสียงหมายเลขตัวที่สอง secondNumb.play(); }, 1000); }, 1500); } else { //ถ้าเป็นเลขตัวเดียว //หน่วงเวลาเล่นเสียง 1.5 วินาที รอให้เล่นเสียงเชิญหมายเลขจบก่อน setTimeout(function () { //หมายเลขตัวแรก var firstNumb = new Audio('sound/' + number.charAt(0) + '.mp3'); //เล่นเสียงหมายเลขตัวแรก firstNumb.play(); }, 1500); } //ลดจำนวนครั้งที่ต้องเล่น times--; //ถ้ายังมีจำนวนครั้งที่ต้องเล่นเหลือ if (times > 0) { //หน่วงเวลาเล่นเสียง 4 วินาที รอให้เล่นเสียงรอบแรกจบก่อน setTimeout(function () { //ทำการเรียก sound(times); }, 4000); } } //กำหนดอีเวนต์การกดปุ่ม document.addEventListener('keydown', key, false); /* * ฟังก์ชันการจัดการปุ่มกด * สามารถใช้ปุ่มแทนการคลิ๊กเมาส์ */ function key(e) { switch (e.keyCode) { case 13: //ถ้ากด enter ให้ทำการเรียกซ้ำ call(); break; case 37: //ถ้ากด ลูกศรทางซ้าย ให้ทำการเรียกหมายเลขก่อนหน้า prev(); break; case 39: //ถ้ากด ลูกศรทางขวา ให้ทำการเรียกหมายเลขถัดไป next(); break; } } </script> </body> </html> 

ตัวอย่างการทำงาน