zoukankan html css js c++ java

JS生成二维码

演示： https://lanleilin.github.io/lanTools/generateQRcode/qrCode.html

代码地址： https://github.com/lanleilin/lanTools/tree/master/generateQRcode

方法，在html中引入qrCode.js即可：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="./js/qrCode.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="container">
            <div id="qrcode">
            </div>
            <input type="text" id="getValue" placeholder="请输入" /> <button id="send">生成验证码</button>
            <div>
                <input type="number" id="getWidth" placeholder="大小(默认120)" />

            </div>
        </div>
    </div>

    <script>
        window.onload = function() {

            function generate(num) {
                this.w = num;
                var that = this;
                this.qrcode = new QRCode(document.getElementById("qrcode"), {
                     that.w, //设置宽高
                    height: that.w
                });
                this.url = document.getElementById("getValue").value ? document.getElementById("getValue").value : "say hello";
                this.qrcode.makeCode(this.url);
            }

            function foo() {
                this.getWidth = document.getElementById('getWidth').value.slice(0, 3);
                this.w = parseInt(this.getWidth) ? parseInt(this.getWidth) : 120;
                new generate(this.w);
                let _this = this;
                document.getElementById("send").addEventListener('click', function() {
                    document.getElementById('qrcode').innerHTML = '';
                    _this.getWidth = document.getElementById('getWidth').value.slice(0, 3);
                    _this.w = parseInt(_this.getWidth) ? parseInt(_this.getWidth) : 120;
                    new generate(_this.w);
                })
            }
            new foo();


        }
    </script>
</body>

</html>

查看全文

相关阅读:
fabric.js 学习
 前端基础回顾
 ubuntu16 mysql 远程连接
 Django rest_framework API 随笔
 django 学习笔记
 vue 返回上一页在原来的位置
 Django mysql 改用pymysql 驱动
 Material-UI
设置placeholder的样式
 Cookie、session和localStorage、以及sessionStorage之间的区别

原文地址：https://www.cnblogs.com/rlann/p/7563276.html