js基于qrcode.js生成二維碼的方法【附demo插件源碼下載】
本文實(shí)例講述了js基于qrcode.js生成二維碼的方法。分享給大家供大家參考,具體如下:
調(diào)用qrcode.js文件代碼:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qrcode{ /*text-align: center;*/ /*display: table-cell;*/ /*width: 96px;*/ /*height: 96px;*/ /*vertical-align:middle;*/ /*position: relative;*/ } </style> </head> <body> <div id="qrcode"> </div> <input type="text" id="getval"/> <button id="send">點(diǎn)擊更換驗(yàn)證碼</button> <script> window.onload =function(){ var qrcode = new QRCode(document.getElementById("qrcode"), { width : 96,//設(shè)置寬高 height : 96 }); qrcode.makeCode("http://chabaoo.cn"); document.getElementById("send").onclick =function(){ qrcode.makeCode(document.getElementById("getval").value); } } </script> </body> </html>
其中 調(diào)用方法:
var qrcode = new QRCode(elem, { width : 96,//設(shè)置寬高 height : 96 }); qrcode.makeCode("http://chabaoo.cn");
附:
qrcode.js可點(diǎn)擊此處本站下載。
這里再提供jquery.qrcode.min.js本站下載地址。
PS:這里再為大家推薦兩款二維碼在線生成工具,免費(fèi)供大家使用:
二維碼在線生成工具(基礎(chǔ)版):
http://tools.jb51.net/transcoding/qrcode
在線生成二維碼工具(加強(qiáng)版):
http://tools.jb51.net/transcoding/jb51qrcode
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- nodejs獲取微信小程序帶參數(shù)二維碼實(shí)現(xiàn)代碼
- nodejs實(shí)現(xiàn)超簡(jiǎn)單生成二維碼的方法
- nodejs動(dòng)態(tài)創(chuàng)建二維碼的方法
- JavaScript生成二維碼圖片小結(jié)
- JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
- JavaScript動(dòng)態(tài)生成二維碼圖片
- 基于JavaScript實(shí)現(xiàn)生成名片、鏈接等二維碼
- QRCode.js二維碼生成并能長(zhǎng)按識(shí)別
- node實(shí)現(xiàn)生成帶參數(shù)的小程序二維碼并保存到本地功能示例
相關(guān)文章
10個(gè)php函數(shù)實(shí)用卻不常見(jiàn)
函數(shù)是PHP如此強(qiáng)大的源泉,但是很多PHP函數(shù)并沒(méi)有得到充分的利用。這里,我們給大家簡(jiǎn)單介紹10個(gè)不常見(jiàn),但非常有用的函數(shù)。2015-10-10PHP中利用substr_replace將指定兩位置之間的字符替換為*號(hào)
PHP的substr_replace將指定兩位置之間的字符替換為*號(hào)的代碼,需要的朋友可以參考下。2011-01-01PHP基于關(guān)聯(lián)數(shù)組20行代碼搞定約瑟夫問(wèn)題示例
這篇文章主要介紹了PHP基于關(guān)聯(lián)數(shù)組20行代碼搞定約瑟夫問(wèn)題,結(jié)合具體實(shí)例分析了php使用關(guān)聯(lián)數(shù)組解決約瑟夫問(wèn)題的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11PHP實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能示例
這篇文章主要介紹了PHP實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能,結(jié)合實(shí)例形式分析了PHP基于堆棧實(shí)現(xiàn)的表達(dá)式運(yùn)算功能,需要的朋友可以參考下2017-12-12php mysqli查詢語(yǔ)句返回值類型實(shí)例分析
這篇文章主要介紹了php mysqli查詢語(yǔ)句返回值類型,結(jié)合實(shí)例形式分析了php+mysqli常用的查詢、插入語(yǔ)句的使用與返回值類型,需要的朋友可以參考下2016-06-06phpStudy在運(yùn)行PHP文件時(shí)出現(xiàn)中文亂碼的有效解決方法
在使用phpStudy進(jìn)行PHP開(kāi)發(fā)時(shí),經(jīng)常會(huì)遇到中文顯示亂碼的問(wèn)題,這不僅影響開(kāi)發(fā)效率,還可能導(dǎo)致網(wǎng)站顯示異常,本文將詳細(xì)介紹解決phpStudy中文亂碼的有效方法,需要的朋友可以參考下2024-10-10解決laravel 出現(xiàn)ajax請(qǐng)求419(unknown status)的問(wèn)題
今天小編就為大家分享一篇解決laravel 出現(xiàn)ajax請(qǐng)求419(unknown status)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09