网页URL自动生成二维码代码_生成二维码的js代码

2023-06-13 16:30:18 网页自动生成访问URL的二维码代码。要在网页上生成二维码并自动关联到网页的URL,您可以使用JavaScript和第三方库来实现。

要在网页上生成二维码并自动关联到网页的URL,您可以使用JavaScript和第三方库来实现。以下是使用qrcode.js库生成二维码的示例代码:

首先,您需要下载并html引入qrcode.js库。您可以从该库的官方网站(https://davidshimjs.github.io/qrcodejs/)下载库文件,然后在HTML文件中引入它:

<!DOCTYPE html>
<html>
<head>
<title>生成二维码</title>
<script src="qrcode.min.js"></script>
</head>
<body>
<div id="qrcode"></div>

<script>
// 获取当前页面的URL
var url = window.location.href;

// 创建二维码实例并设置参数
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: url,
width: 128,
height: 128,
});

// 可选:你可以自定义二维码的样式
var qrcodeElement = document.getElementById("qrcode").getElementsByTagName("img")[0];
qrcodeElement.style.border = "5px solid red";
</script>
</body>
</html>

在上面的代码中,我们首先获取了当前页面的URL,并将其作为文本传递给QRCode实例的text参数。然后,我们在一个div元素中创建了一个空的容器来放置生成的二维码图像。通过QRCode实例的构造函数,我们将指定的参数传递给它,包括二维码的宽度和高度。

如果需要自定义二维码的样式,您可以通过获取生成的二维码图像元素,如上述代码中的qrcodeElement,然后使用JavaScript设置其样式。

请确保在网页中正确引入qrcode.min.js库文件,并根据需要修改和适应生成的二维码的样式和参数。

上一篇:div居中显示
下一篇:css隐藏div的方法
更新