JS實現(xiàn)掃碼槍掃描二維碼功能
掃碼槍掃描二維碼,具體內(nèi)容如下所示:
業(yè)務(wù)需求要將數(shù)據(jù)生成二維碼,并用掃碼槍掃出數(shù)據(jù)上傳到服務(wù)端。
先上代碼吧,之后再完善注意點
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('掃碼結(jié)束')
console.timeEnd()
that.parseQRCode(code) // 獲取到掃碼槍輸入的內(nèi)容,做別的操作
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
}
總結(jié)
以上所述是小編給大家介紹的JS實現(xiàn)掃碼槍掃描二維碼功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對我們網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
上一篇:nodejs開發(fā)一個最簡單的web服務(wù)器實例講解
欄 目:JavaScript
下一篇:javascript實現(xiàn)超好看的3D煙花特效
本文標題:JS實現(xiàn)掃碼槍掃描二維碼功能
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9333.html
您可能感興趣的文章
- 04-02java后端代碼分頁 java后端實現(xiàn)分頁page
- 01-10Echarts實現(xiàn)單條折線可拖拽效果
- 01-10在Vue項目中使用Typescript的實現(xiàn)
- 01-10js實現(xiàn)上傳圖片并顯示圖片名稱
- 01-10Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
- 01-10echarts實現(xiàn)折線圖的拖拽效果
- 01-10d3.js實現(xiàn)圖形縮放平移
- 01-10小程序簡單兩欄瀑布流效果的實現(xiàn)
- 01-10H5實現(xiàn)手機拍照和選擇上傳功能
- 01-10Echarts實現(xiàn)多條折線可拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機閱讀
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-10delphi制作wav文件的方法
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10C#中split用法實例總結(jié)
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文


