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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js星星评分效果
Jul 24 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
python批量下载图片的三种方法
2013/04/22 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python 全文检索引擎详解
2017/04/25 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python中最小二乘法详细讲解
2021/02/19 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
《理想》教学反思
2014/02/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
倡议书的格式写法
2015/04/28 职场文书
公司人力资源管理制度
2015/08/05 职场文书
人民调解协议书
2016/03/21 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS