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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
移动端js触摸事件详解
Sep 18 Javascript
纯javascript版日历控件
Nov 24 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
php发送与接收流文件的方法
2015/02/11 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
学习Vue组件实例
2018/04/28 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python网络编程之五子棋游戏
2020/05/14 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
招聘单位介绍信
2014/01/14 职场文书
升职感谢信
2015/01/22 职场文书
员工辞职信范文大全
2015/05/12 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python