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>
  • 相关阅读:
    python模块添加
    Python 的列表排序
    python中文处理问题
    排序算法堆排序
    搜索二分搜索
    排序算法(随机)快速排序(递归)
    排序算法计数排序
    OO设计原则总结
    异常控制以及进程调度
    ubuntu12.04 alternate win7 双系统安装
  • 原文地址:https://www.cnblogs.com/rlann/p/7563276.html
Copyright © 2011-2022 走看看