Js生成二维码

效果图

左边是放大前 右边是放大后

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <title>二维码点击放大demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <script type="text/javascript" src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
        }

        .qrcode_img {
            /*display: inline !important;*/
            /*display: block;*/
            margin: 0 auto;
            border:1px solid #f6f6f6;
        }

        .qrcode_img_big {
            position: absolute;
            /*top: 50%;*/
            left: 50%;
            transform: translateX(-50%);
            /*width: 50px;*/
            /*height: 50px;*/
            border:1px solid #f6f6f6;
        }

        #qrcode {
            /*width:100px;*/
            /*height:100px;*/
            width: 100%;
            margin-top:15px;
            text-align: center;
            justify-content: center;
            display: flex !important;
        }

        .fullScreenQrcode2{
            width:100%;
            height:100%;
            background-color:#2D3132;
            z-index:999;
            overflow:hidden;
            position:absolute;
        }
        .fullScreenQrcode2 div{
            position:relative;
            top:30%;
            text-align:center;
        }

    </style>
</head>
<body>
<!-- 放大的二维码 -->
<div onclick="fullScreenQrcodeClick2()" class="fullScreenQrcode2" style="display:none;"><div id="bigQRCode"></div></div>

<div class="myout">
    <div>点击二维码可放大缩小</div>
    <div id="qrcode" style="margin-top:15px;" onclick="qrcodeClick2()"></div>
</div>

<script type="text/javascript">

    $(function () {
        renderQrCode();

    });

    function renderQrCode() {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 100,
            height: 100
        });
        //生成二维码
        var elText = "order:11111111111";
        qrcode.makeCode(elText);

        var bigQRCode = new QRCode(document.getElementById("bigQRCode"), {
            width : 200,
            height : 200
        });
        bigQRCode.makeCode(elText);

        //二维码居中
        // $("#qrcode img").addClass("qrcode_img");
        $("#bigQRCode img").addClass("qrcode_img");
    }

    function fullScreenQrcodeClick2(){
        $('.fullScreenQrcode2').hide();
        $('.myout').css("overflow","");
        $('.myout').css("width","");
        $('.myout').css("height","");
    }
    function qrcodeClick2(){
        $('.fullScreenQrcode2').show();
        $('.myout').css("overflow","hidden");
        $('.myout').css("width","100%");
        $('.myout').css("height","100%");
    }
</script>
</body>
</html>
# javascript # css
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

初级Python开发者：AI数据分析时代，创意保卫战指南——老码农的幽默生存手册

avatar 2048 AI社区

【Java异常处理艺术从CheckedException到Runtime的优雅演进】

Java异常处理的演进历程反映了软件设计思想的成熟：从最初的强制约束到如今的弹性策略，从技术驱动到业务语义融合。未来的发展趋势将继续强调异常与领域语言的结合、分布式系统中的跨服务错误传播以及函数式错误处理模式的深度集成。无论是Checked还是Runtime异常，其核心价值始终在于如何通过清晰的失败语义提升系统的可观测性和可维护性，最终实现真正的优雅故障处理（Graceful Failure）。

avatar 2048 AI社区

基于Q-learning算法和ε-greedy策略解决随机生成的方形迷宫问题（Matlab代码实现）

本文研究了Q-learning算法结合ε-greedy策略在随机生成方形迷宫路径规划中的应用。通过构建离散状态空间、设计多层次奖励函数，并采用动态参数调整机制，实现了智能体在未知环境中的高效寻路。实验结果表明，该算法在10×10迷宫中经过1500次迭代后，路径成功率达到98%，平均步长较传统A*算法缩短23%。研究验证了强化学习在动态路径规划中的适应性优势。

avatar 2048 AI社区