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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
原生js实现日期选择插件
May 21 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
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP7新增函数
2021/03/09 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python发送邮件实例分享
2017/07/28 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python中必要的名词解释
2019/11/20 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书