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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript实现select添加option
Jul 03 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
javascript实现倒计时提示框
Mar 02 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
基于MySQL体系结构的分析
2013/05/02 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
javascript 打印页面代码
2009/03/24 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python实现126邮箱发送邮件
2020/05/20 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
指针和引用有什么区别
2013/01/13 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
初中作文评语大全
2014/04/23 职场文书
公司地址变更通知
2015/04/25 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL