这篇文章主要介绍了js怎么生成二维码，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
如下：（仅供参考）
计算
安全
数据库
网络和加速
企业服务
<%--
Created by IntelliJ IDEA.
User: ASUS
author:xumz
Date: 2021/2/27
Time: 10:33
搬运请备注
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
<script src="js/qrcode.min.js" type="text/javascript"></script>
</head>
<body>
<h2>输入URL以生成二维码</h2>
<div>
<label for="qr_link">URL:</label>
<input id="qr_link" type="text" value="hello er wei ma !!" />
<input type="button" id="qr_creat" value="生成">
<p>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</p>
<br/>
</div>
<br>
<div id="qr_container" ></div>
<script type="text/javascript">
//点击生成按钮以后
document.getElementById("qr_creat").onclick = function() {
var qrcode = new QRCode( //实例化生成二维码
document.getElementById("qr_container"), {//二维码存放的div
width: 160, //设置宽高
height: 160,
}
);
//根据input框的值生成二维码
qrcode.makeCode($('#qr_link').val());
$("#qr_container").append("<br><br>"); //换行
}
</script>
</body>
</html>代码运行效果如下图：
第二个例子用到了layui的一些元素layui下载地址
引入layui.all.js和layui.css即可
scanQR.jsp如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<%--注意引用和地址--%>
<script src="js/qrcode.min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/layui/layui.all.js"></script>
<link type="text/css" rel="styleSheet" href="js/layui/css/layui.css" rel="external nofollow" />
</head>
<body>
<div align="center">
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">预览</button>
</div>
<div id="code" >
<div id="qrcode" ></div>
</div>
<script>
layui.use(['layer'], function () {
var layer = layui.layer
});
// 设置要生成二维码的链接
new QRCode(document.getElementById("qrcode"), {
text: 'https://blog.csdn.net/bug_producter/',//注意地址的修改
width: 250,
height: 250
});
//预览等弹出框
function skipHandle() {
layer.open({
type: 1,
title: "bug_producter的博客",//标题
area: ['400px', '400px'],
content: $('#code').html(),
});
}
</script>
</body>
</html>运行效果如下：
感谢你能够认真阅读完这篇文章，希望小编分享的“js怎么生成二维码”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
