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 树形结构的选择器
Feb 15 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 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
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP实现小偷程序实例
2016/10/31 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript call和apply方法
2008/11/24 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
Python入门教程之运算符与控制流
2016/08/17 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
小学教师办公室制度
2014/02/03 职场文书
早会主持词
2014/03/17 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年部门工作总结
2014/11/12 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
历史博物馆观后感
2015/06/05 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书