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 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
Angular 数据请求的实现方法
May 07 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
python动态监控日志内容的示例
2014/02/16 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python生成器推导式用法简单示例
2019/10/08 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
安全施工责任书
2014/08/25 职场文书
工程承包协议书范本
2014/09/29 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python