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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
vue 实现走马灯效果
Oct 28 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
安装APACHE
2007/01/15 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php文件上传的两种实现方法
2016/04/04 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
js选项卡的实现方法
2015/02/09 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
vue实现信息管理系统
2020/05/30 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python爬虫 requests-html的使用
2020/11/30 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
会计专业自荐信范文
2013/12/02 职场文书
校班主任推荐信范文
2013/12/03 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
社区母亲节活动方案
2014/03/05 职场文书
社区科普工作方案
2014/06/03 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Go并发4种方法简明讲解
2022/04/06 Golang
Java实现注册登录跳转
2022/06/16 Java/Android