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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
原生js实现轮播图
Feb 27 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
js实现列表按字母排序
Aug 11 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
学生保证书范文
2014/04/28 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android