js 生成二维码

最新推荐文章于 2025-07-08 21:28:07 发布

原创最新推荐文章于 2025-07-08 21:28:07 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#二维码

js 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种利用JavaScript二维码生成库QRCode在网页上实时生成二维码的方法。通过结合jQuery和QRCode库，用户可以输入文本，即时生成对应的二维码图片。此教程详细展示了如何设置HTML页面、引入必要的库文件，并通过JavaScript实现二维码的动态生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
    <title>Javascript 二维码生成库：QRCode</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="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    </head>
    <body>
    <input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
    
    <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
    	width : 100,
    	height : 100
    });
    
    function makeCode () {		
    	var elText = document.getElementById("text");
    	
    	if (!elText.value) {
    		alert("Input a text");
    		elText.focus();
    		return;
    	}
    	
    	qrcode.makeCode(elText.value);
    }
    
    makeCode();
    
    $("#text").
    	on("blur", function () {
    		makeCode();
    	}).
    	on("keydown", function (e) {
    		if (e.keyCode == 13) {
    			makeCode();
    		}
    	});
    </script>
    </body>
    </html>

页面

在这里插入图片描述