使用QRCode.js生成二維碼，代碼如下;
<!DOCTYPE html> <html lang="en"> <head> <title>二維碼生成</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script> </head> <body>
// 生成一個input框，設置網址， <input id="text" type="text" value="http://10.140.192.220:8080/home" style="width:80%"/><br/>
// 生成二維碼的div <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div> <script type="text/javascript">
// 聲明一個二維碼對象，並設置寬高 var qrcode = new QRCode(document.getElementById("qrcode"), { width: 500, height: 500 }); // 生成二維碼的函數 function makeCode() { var elText = document.getElementById("text"); // 網址為空，使用彈框提示 if (!elText.value) { alert("Input a text"); elText.focus(); return; } // 生成二維碼 qrcode.makeCode(elText.value); } makeCode(); // 綁定事件 blur當輸入域失去焦點 (blur) 時改變其顏色並且生成二維碼 $("#text").on("blur", function () { makeCode();
// 綁定事件 當回車鍵按下時生成二維碼 }).on("keydown", function (e) { if (e.keyCode == 13) { makeCode(); } }); </script> </body> </html>
注意：可以使用手機的微信、淘寶等軟件掃描二維碼，項目和手機請在同一網絡，比如連接同一wifi。