js生成二维码_js字符串转二维码[通俗易懂]

js生成二维码_js字符串转二维码[通俗易懂]js生成二维码一、一个简单的示例前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的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>

代码运行效果如下图:
在这里插入图片描述

二、二个简单的示例

第二个例子用到了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"/>
</head>
<body>

<div align="center">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">预览</button>
</div>

<div id="code" style="display: none;">
    <div id="qrcode" style="margin-left: 75px;margin-top: 20px"></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>

运行效果如下:
在这里插入图片描述
在这里插入图片描述
这是博主刚刚生成的一个二维码,扫描后会跳转到博主的主页,用手机浏览器,或者微信QQ…等等都可以扫描扫描,关键代码就这一句 text: ‘https://blog.csdn.net/bug_producter/’

有兴趣的小伙伴可以转到,

手机访问本地Tomcat服务器

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

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

今天的文章js生成二维码_js字符串转二维码[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/68974.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注