JS实现二维码生成

最新推荐文章于 2025-06-25 09:14:06 发布

加油乐

最新推荐文章于 2025-06-25 09:14:06 发布

阅读量499

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS相关文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2301_76459194/article/details/147972641

JS相关专栏收录该内容

49 篇文章

订阅专栏

一. 前言

二维码又称QR Code，是一个近几年来移动设备上很流行的一种编码方式 , 它比传统的一维码（条形码）能存更多的信息，也能表示更多的数据类型。

二.代码展示

window.location.href = “https://blog.csdn.net/2301_76459194?spm=1011.2266.3001.5343”

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Suporka Vue App</title>
    <style>
        .container {
            padding: 60px;
            margin: 0 auto;
            line-height: 50px;
        }

        input {
            display: inline-block;
            width: 200px;
            height: 32px;
            line-height: 1.5;
            padding: 4px 7px;
            font-size: 12px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            color: #515a6e;
            background-color: #fff;
            background-image: none;
            position: relative;
            cursor: text;
            transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
        }

        button {
            color: #fff;
            background-color: #19be6b;
            border-color: #19be6b;
            outline: 0;
            vertical-align: middle;
            line-height: 1.5;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 5px 15px 6px;
            font-size: 12px;
            border-radius: 4px;
            transition: color 0.2s linear, background-color 0.2s linear,
                border 0.2s linear, box-shadow 0.2s linear;
        }

        #qrcode {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" placeholder="请输入您想转化成二维码的字符串" id="input" />
        <button onclick="creatQRcode()">一键生成</button>
        <div id="qrcode"></div>
    </div>
    <script src="https://zxpsuper.github.io/Demo/qrcode/qrcode-dev.js"></script>
    <script type="text/javascript">
        var qrcode = null;
        function creatQRcode() {
            document.getElementById("qrcode").innerHTML = "";
            // 设置要生成二维码的链接
            // qrcode = new QRCode(document.getElementById("qrcode"), "http://www.baidu.com");  
            // 设置要生成二维码的样式
            qrcode = new QRCode(document.getElementById("qrcode"), {
                text: document.getElementById("input").value,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }
    </script>
</body>

</html>