1. 程式人生 > 程式設計 >JS實現掃碼槍掃描二維碼功能

JS實現掃碼槍掃描二維碼功能

掃碼槍掃描二維碼,具體內容如下所示:

業務需求要將資料生成二維碼,並用掃碼槍掃出資料上傳到服務端。

先上程式碼吧,之後再完善注意點

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實現掃碼槍掃描二維碼功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!