zoukankan      html  css  js  c++  java
  • web浏览器使用ic卡或磁卡读卡器自动弹出页面

    最近手上一个项目,健身场馆会员管理系统,新增加一个需求,希望客户一刷会员卡自动弹出会员的信息和预约的课程信息

    读卡器就是市面上普通的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>
  • 相关阅读:
    HDU 1201 18岁生日 【日期】
    单点登录cas常见问题(二)
    IntelliJ IDEA 15和Maven创建Java Web项目
    ExpandableListView的使用以及信息的高亮显示
    基于RTP的h.264视频传输系统设计(一)
    RocketMQ 消息队列单机部署及使用
    使用MySQL Workbench进行数据库设计——MySQL Workbench用法总结
    从JVM的角度看JAVA代码--代码优化
    Ajax系列之四:问题总结
    使用css打造形形色色的形状!
  • 原文地址:https://www.cnblogs.com/yangfei123/p/10123312.html
Copyright © 2011-2022 走看看