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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
浅谈JS的二进制家族
May 09 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
js自带函数备忘 数组
2006/12/29 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
为什么要做架构设计
2015/07/08 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
酒店管理求职信
2014/06/09 职场文书
联片教研活动总结
2014/07/01 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS