EP.17 ระบบพาสเวิร์ดสองชั้นแบบ roexe

noMerzy | 2016-08-16 09:49:30

ระบบพาสเวิร์ดสองชั้น roexe

secondpass.html
<!DOCTYPE html> <html> <head> <title>2nd Password</title> <style> /* สไตล์ตาราง */ table { background-color: #aecefd; border-collapse: collapse; } table tr td { width: 50px; height: 50px; border: 2px solid #999; text-align: center; cursor: pointer; color: #fff; font-weight:900; font-size: 24px; } </style> </head> <!-- ป้องกันการกดคีบอร์ด --> <body onkeypress="return false;"> <input type="text" maxlength="4" id="pass"><br> <table id="keypad"></table><br> <input type="button" value="ok" onclick="submit()"> <script> var keypad = document.getElementById('keypad'); /* * ฟังก์ชั่นสร้างปุ่ม */ function pad() { //ปุ่ม 0-9 var key = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; //สุ่มอาเรย์ var i = key.length, j, temp; while (--i > 0) { j = Math.floor(Math.random() * (i + 1)); temp = key[j]; key[j] = key[i]; key[i] = temp; } //html ตารางปุ่ม var html = '<tr><td>' + key[0] + '</td><td>' + key[1] + '</td><td>' + key[2] + '</td></tr>'; html += '<tr><td>' + key[3] + '</td><td>' + key[4] + '</td><td>' + key[5] + '</td></tr>'; html += '<tr><td>' + key[6] + '</td><td>' + key[7] + '</td><td>' + key[8] + '</td></tr>'; html += '<tr><td>' + key[9] + '</td><td colspan="2" onclick="reset()">reset</td></tr>'; //นำ html ที่ได้ใส่ลงในตาราง keypad.innerHTML = html; //เพิ่มอีเวนต์ให้ อิลิเมนต์ td ยกเว้นตัวสุดท้ายที่เป็น reset elem_td = document.getElementsByTagName('td'); for (i = 0; i < elem_td.length - 1; i++) { //เมื่อกดปุ่มให้เรียกฟังก์ชั่น btnClick elem_td[i].addEventListener('click', btnClick); } } //สร้างปุ่ม pad(); /* * ฟังก์ชั่นการกดปุ่ม */ function btnClick() { //เพิ่มค่าลงใน password document.getElementById('pass').value += this.innerHTML; //สุ่มปุ่มใหม่ pad(); } /* * ฟังก์ชั่นรีเซ็ตพาสเวิร์ด */ function reset() { //ลบ password document.getElementById('pass').value = ""; //สุ่มปุ่มใหม่ pad(); } /* * ฟังก์ชั่นตกลง */ function submit(){ alert(document.getElementById('pass').value); } </script> </body> </html>