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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
JavaScript设计模式初探
Jan 07 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
javascript简单链式调用案例分析
May 10 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
Javascript查看大图功能代码实现
May 07 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
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
python3实现windows下同名进程监控
2018/06/21 Python
python 调试冷知识(小结)
2019/11/11 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
计算机专业自我鉴定
2013/10/15 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
学习退步检讨书
2014/09/28 职场文书
回门宴新娘答谢词
2015/09/29 职场文书