JS实现扫码枪扫描二维码功能


Posted in Javascript onJanuary 03, 2020

扫码枪扫描二维码,具体内容如下所示:

业务需求要将数据生成二维码,并用扫码枪扫出数据上传到服务端。

先上代码吧,之后再完善注意点

this.start = new Date().getTime()
  let code = ''
  let lastTime, nextTime
  let lastCode, nextCode
  let that = this
  window.document.onkeypress = function (e) {
   if (window.event) { // IE
    nextCode = e.keyCode
   } else if (e.which) { // Netscape/Firefox/Opera
    nextCode = e.which
   }
   console.time()
   console.log('nextCode', nextCode)
   if (e.which === 13) {
    if (code.length < 3) return // 手动输入的时间不会让code的长度大于2,所以这里只会对扫码枪有
    console.log(code)
    console.log('扫码结束')
    console.timeEnd()
    that.parseQRCode(code) // 获取到扫码枪输入的内容,做别的操作
    code = ''
    lastCode = ''
    lastTime = ''
    return
   }
   nextTime = new Date().getTime()
   if (!lastTime && !lastCode) {
    console.log('扫码开始。。。')
    code += e.key
   }
   if (lastCode && lastTime && nextTime - lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
    console.log('防止首字缺失。。。')
    code = e.key
   } else if (lastCode && lastTime) {
    console.log('扫码中。。。')
    code += e.key
   }
   lastCode = nextCode
   lastTime = nextTime
  }

总结

以上所述是小编给大家介绍的JS实现扫码枪扫描二维码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
You might like
PHP新手上路(十二)
2006/10/09 PHP
PHP操作xml代码
2010/06/17 PHP
php 类自动载入的方法
2015/06/03 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
python如何导入依赖包
2020/07/13 Python
比利时买床:Beter Bed
2017/12/06 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
幼儿园小班班务总结
2015/08/03 职场文书