这篇文章主要介绍了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怎么生成二维码”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
