使用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="80%"/><br/>
// 生成二维码的div <div id="qrcode" style="100px; height:100px; margin-top:15px;"></div> <script type="text/javascript">
// 声明一个二维码对象，并设置宽高 var qrcode = new QRCode(document.getElementById("qrcode"), { 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。