web瀏覽器使用ic卡或磁卡讀卡器自動彈出頁面

時間 2019-12-10

標籤 web 瀏覽器使用 ic卡磁卡讀卡器自動彈出頁面欄目 HTML 简体版

原文原文鏈接

最近手上一個項目,健身場館會員管理系統,新增長一個需求,但願客戶一刷會員卡自動彈出會員的信息和預定的課程信息html

讀卡器就是市面上普通的ic卡或磁卡的讀卡器,某寶上買的,廠家沒有提供任何瀏覽器插件瀏覽器

機器拿到手上發現,一刷卡鼠標只要是可輸入的狀態立馬就能輸出會員卡的卡號,想到可能刷卡器是模擬的鍵盤操做測試

寫了一段js代碼測試了一下,發現果真是觸發的鍵盤的數字鍵以及enter鍵,因爲是機器操做,兩次鍵盤事件觸發的時間極短(至少比人快不少)ui

機器刷卡:spa

手動輸入:插件

那麼咱們就能夠利用人和機器的時間差,乾點事情scala

測試代碼以下code

<!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>