js 生成二维码 qrcode jq

最新推荐文章于 2023-08-11 09:43:35 发布

一个程序员的春天

最新推荐文章于 2023-08-11 09:43:35 发布

阅读量558

点赞数 1

分类专栏： js qrcode jquery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/weixin_44186787/article/details/105851427

版权

js 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

jquery

15 篇文章 0 订阅

订阅专栏

qrcode

1 篇文章 0 订阅

订阅专栏

因为部分原因，前端页面需要用到二维码，后台处理起来又比较费事一些，需要前端来进行处理，后台返回一个二维码的链接，前端生成一个二维码

    一定要引入qrcode.min.js
    我自己使用的是哪个版本，忘记了，我新找了一个链接，应该可以直接使用
    
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<!DOCTYPE html>
<html lang="en" data-use-rem="750">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>二维码</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: url("./img/bj.png") no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .box {
            position: fixed;
            left: 50%;
            top: 72%;
            width: 3.6rem;
            margin-left: -1.8rem;
            overflow: hidden;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .walletAddressImg {
            width: 90px;
            height: 90px;
            background: url("./img/kuang.png") no-repeat;
            background-size: 100% 100%;
            padding: 0.1rem;
            margin: 0 auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .walletAddressImg img {
            margin: 0 auto;
            /*margin-top: 3px;*/
        }

        .code {
            text-align: center;
            width: 3.6rem;
            height: 0.7rem;
            line-height: 0.7rem;
            margin-top: 0.2rem;
            background: url("./img/fuzhi.png") no-repeat;
            background-size: 100% 100%;
        }

        a {
            display: block;
            height: 100%;
            text-decoration: none;
            font-size: 0.32rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <input id="text" type="hidden" />
        <div id="qrcode" class="walletAddressImg"></div>
        <div class="code">
            <a href="#">推广二维码</a>
        </div>
    </div>

    <script src="./jquery.js"></script>
    <script src="./qrcode.min.js"></script>
    <script>
        $(function () {
            var url = "www.baidu.com";
            makeCode(url);
        });

        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 80,
            height: 80
        });

        function makeCode(url) {
            var elText = document.getElementById("text");
            var elTextVal = document.getElementById("text").value = url;
            if (!elText.value) {
                console.log("为空");
                elText.focus();
                return;
            }
            qrcode.makeCode(elTextVal);
        }

        // $("#text").on("blur", function () {
        //     makeCode();
        // }).on("keydown", function (e) {
        //     if (e.keyCode == 13) {
        //         makeCode();
        //     }
        // });
    </script>
</body>

</html>

一个程序员的春天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 生成二维码 qrcode jq

因为部分原因，前端页面需要用到二维码，后台处理起来又比较费事一些，需要前端来进行处理，后台返回一个二维码的链接，前端生成一个二维码一定要引入qrcode.min.js 我自己使用的是哪个版本，忘记了，我新找了一个链接，应该可以直接使用 <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0....
复制链接

扫一扫