最近手上一個項目,健身場館會員管理系統,新增加一個需求,希望客戶一刷會員卡自動彈出會員的信息和預約的課程信息
讀卡器就是市面上普通的ic卡或磁卡的讀卡器,某寶上買的,廠家沒有提供任何瀏覽器插件
機器拿到手上發現,一刷卡鼠標只要是可輸入的狀態立馬就能輸出會員卡的卡號,想到可能刷卡器是模擬的鍵盤操作
寫了一段js代碼測試了一下,發現果然是觸發的鍵盤的數字鍵以及enter鍵,由於是機器操作,兩次鍵盤事件觸發的時間極短(至少比人快很多)
機器刷卡:
手動輸入:
那么我們就可以利用人和機器的時間差,干點事情
測試代碼如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> </head> <body class="hold-transition login-page"> <!-- 輸入框 --> <input type="text" name="" value="" autofocus> </body> <script> window.onload = function(e){ code = ""; // 模擬輸入的值 var lastTime,nextTime;// 記錄兩次鍵盤的時間 var lastCode,nextCode;// 兩次鍵盤的鍵碼值 document.onkeypress = function(e) {// 監聽鍵盤事件 nextCode = e.which;// 當前的鍵碼 nextTime = new Date().getTime();// 當前的毫秒數 console.log(nextCode,(nextTime - lastTime)); if(nextCode >= 48 && nextCode <= 57){// 只關注數字鍵 if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {// 相差30以內說明是機器刷卡 code += String.fromCharCode(lastCode);// 把鍵盤碼返回為對應的值 } else {// 手動在輸入 code = ""; } // 當前的鍵盤碼和時間作為下一次的上一次 lastCode = nextCode; lastTime = nextTime; } if(nextCode == 13){//enter鍵代表刷卡結束 if(code && (nextTime - lastTime) <= 100){// 刷卡的卡號獲取成功,且是機器觸發的enter code += String.fromCharCode(lastCode); window.location.href="http://www.baidu.com"; } } } } </script> </html>