链接生成二维码

最新推荐文章于 2024-11-22 16:28:41 发布

李衍春

最新推荐文章于 2024-11-22 16:28:41 发布

阅读量485

点赞数

分类专栏： js链接生成二维码

本文链接：https://blog.youkuaiyun.com/l123y123c123/article/details/103300529

版权

js链接生成二维码专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用qrcode.js库在网页中生成二维码。通过在HTML中引入jQuery和qrcode.js，然后创建一个输入框和二维码显示区域，利用JavaScript监听输入框的事件，实时更新二维码内容。当用户在输入框中输入链接或其他文本后，点击输入框或按回车键，即可自动生成相应的二维码。

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

1.引用qrcode.js
2.界面：

<!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>Cross-Browser QRCode generator for Javascript</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="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="https://www.baidu.com/" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

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>