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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python中基础的socket编程实战攻略
2016/06/01 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
详解Python中的动态属性和特性
2018/04/07 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python3 反射的四种基本方法解析
2019/08/26 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
体育专业个人求职信范文
2013/12/27 职场文书
《猫》教学反思
2014/02/26 职场文书
软件项目开发计划书
2014/05/01 职场文书
销售员态度差检讨书
2014/10/26 职场文书
中班下学期个人工作总结
2015/02/12 职场文书