js生成二维码

程序员文章站 2022-03-13 08:19:00

js生成二维码一、一个简单的示例前段时间项目中需要开发扫描二维码查看信息的功能，在网上查了一些资料，把用过的方法进行总结需要导入一个qrcode的js 插件。一、一个简单的示例如下：（仅供参考）<%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | Fil...

js生成二维码

一、一个简单的示例

前段时间项目中需要开发扫描二维码查看信息的功能，在网上查了一些资料，把用过的方法进行总结需要导入一个qrcode的js 插件。

插件链接: qrcode.js下载地址，点击即可下载，不需C币.

一、一个简单的示例

如下：（仅供参考）

<%--
  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>

<h1>输入URL以生成二维码</h1>
<div>
    <label for="qr_link">URL:</label>
    <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/>
    <input type="button" id="qr_creat" value="生成">
    <p>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</p>
    <br/>
</div>
<br>
<div id="qr_container" style="margin:auto; position:relative;"></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>

代码运行效果如下图：
js生成二维码
有兴趣的小伙伴可以转到，

手机访问本地Tomcat服务器

在这篇文章的最后重点哪儿，也有关于二维码的内容，会追加一个例子的文件

创作不易，如果这篇文章能够帮助到你，希望能关注或收藏一下博主，如果文章内容有问题也可留言讨论，我们一起学习，一起进步！！

本文地址：https://blog.csdn.net/bug_producter/article/details/114163534

相关标签： java web web js javascript

上一篇：华帝战略合作快手：创造热爱，赋能品牌情感价值

下一篇： vue实现桌面向网页拖动文件(可显示图片/音频/视频)

js生成二维码