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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 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动态生成JavaScript代码
2009/03/09 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
js常用DOM方法详解
2017/02/04 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
技术总监的工作职责
2013/11/13 职场文书
四下基层实施方案
2014/03/28 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
校本课程教学计划
2015/01/19 职场文书
小学生安全教育心得体会
2016/01/15 职场文书