使用qrcodeJS生成二维码

最新推荐文章于 2024-06-30 21:26:58 发布

人间小美味695

最新推荐文章于 2024-06-30 21:26:58 发布

阅读量750

点赞数 2

分类专栏： # 插件类 # JavaScript # other 文章标签： javascript npm html 前端二维码

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115526935

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

插件类

15 篇文章 1 订阅

订阅专栏

other

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qrcode.js生成二维码</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
</head>

<body>
    <div id="qrcode" style="border:10px solid #fff;position:fixed;top:20%;left:50%;transform: translate(-50%,0%);outline: 1px solid #999;"></div>
    <script>
        $(function() {
            //实例化二维码并调整二维码大小
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 180,
                height: 180,
                correctLevel: QRCode.CorrectLevel.L
            });
            //生成二维码
            function makeCode(promptText) {
                //qrcode.clear();
                qrcode.makeCode(promptText);
            };

            let result = prompt("输入需要转为二维码的文本", "https://liujianwei695.gitee.io/onlineeffect")

            if (result) {
                if (result.trim() === "") {
                    console.log("empty");
                    alert("输入为空，请输入有效值")
                    window.location.reload();
                } else {
                    console.log("confirm");
                    //调用生成二维码方法
                    makeCode(result);
                }
            } else {
                if (result === null) {
                    console.log("cancel");
                    alert("请选择确定，生成对应二维码")
                } else if (result.trim() === "") {
                    console.log("empty");
                    alert("输入为空，请输入有效值")
                }
                window.location.reload();
            }

        })
    </script>
    <script>
        console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
    </script>

</body>

</html>