楚江临 2021-10-15 15:03 采纳率: 33.3%
浏览 30
已结题

想要修改这个二维码生成的大小，但是修改没有效果，只能生成最初设定的200，200。请问怎样才可以让这个input输入的值有效，比如我想在input输入400，400，想要生成400*400大小的二维码

img


<!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>Cross-Browser QRCode generator for Javascript</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="jquery.min.js"></script>
        <script type="text/javascript" src="qrcode.js"></script>
    </head>

    <body>
        <input id="text" type="text" value="http://jindo.dev.naver.com/collie"
            style="width:80%; text-align: center;" /><br />

        <p style="display: inline-block;">宽度</p>

        <input id="code_width" type="number" value="200"
            style="width:9.375rem; text-align: center; display: inline-block;" /><br />
        <p style="display: inline-block;">高度</p>
        <input id="code_height" type="number" value="200"
            style="width:9.375rem; text-align: center; display: inline-block;" /><br />
        <div>
            <button id="make_code" onclick="makeCode()">生成二维码</button>
            <button id="make_code" onclick="testNetRequest()">美化二维码</button>
        </div>

        <div id="qrcode" style="min-width:100px; min-height:100px; margin-top:15px; "></div>


        <script type="text/javascript">
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: $("#code_width").val(),
                height: $("#code_height").val()
            });

            function makeCode() {
                var elText = document.getElementById("text");

                if (!elText.value) {
                    alert("Input a text");
                    elText.focus();
                    return;
                }

                qrcode.makeCode(elText.value);
            }


            makeCode();

            $("#text").
            on("blur", function() {
                makeCode();
            }).
            on("keydown", function(e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
        </script>

        <script src="netrequest/jquery-3.3.1.js"></script>
        <script>
            function testNetRequest() {}
        </script>
        <script>
            function testNetRequest() {
                // var a = document.getElementById("text").value
                // alert(a)
                $.ajax({
                    type: "get",
                    url: "https://cli.im/api/qrcode/code?text=asdasdasda&mhid=sELPDFnok80gPHovKdI",
                    async: true,
                    success: function(data) {
                        alert(data)
                    },
                    error: function(data) {
                        alert(data)
                    }
                });
            }
        </script>
        <script>

        </script>

    </body>
  • 写回答

1条回答 默认 最新

  • RE_ABANDON 2021-10-15 16:00
    关注

    修改一下代码就行 引入的 qrcode和jquery位置不一样，你要改下再运行 

    
 
<!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>Cross-Browser QRCode generator for Javascript</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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
       <script type="text/javascript" src="qrcode.min.js"></script>
    </head>
    <body>
        <input id="text" type="text" value="http://jindo.dev.naver.com/collie"
            style="width:80%; text-align: center;" /><br />
        <p style="display: inline-block;">宽度</p>
        <input id="code_width" type="number" value="200"
            style="width:9.375rem; text-align: center; display: inline-block;" /><br />
        <p style="display: inline-block;">高度</p>
        <input id="code_height" type="number" value="200"
            style="width:9.375rem; text-align: center; display: inline-block;" /><br />
        <div>
            <button id="make_code" onclick="makeCode()">生成二维码</button>
            <button id="make_code" onclick="testNetRequest()">美化二维码</button>
        </div>
        <div id="qrcode" style="min-width:100px; min-height:100px; margin-top:15px; "></div>
 
        <script type="text/javascript">
            function makeCode() {
                var elText = document.getElementById("text");
                if (!elText.value) {
                    alert("Input a text");
                    elText.focus();
                    return;
                }
                //清空之前生成的
                $('#qrcode').html("");
                //重新生成
                var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: $("#code_width").val(),
                height: $("#code_height").val()
            });
                qrcode.makeCode(elText.value);
            }
 
            makeCode();
            $("#text").
            on("blur", function() {
                makeCode();
            }).
            on("keydown", function(e) {
                if (e.keyCode == 13) {
                    makeCode();
                }
            });
        </script>
        <script src="netrequest/jquery-3.3.1.js"></script>
        <script>
            function testNetRequest() {}
        </script>
        <script>
            function testNetRequest() {
                // var a = document.getElementById("text").value
                // alert(a)
                $.ajax({
                    type: "get",
                    url: "https://cli.im/api/qrcode/code?text=asdasdasda&mhid=sELPDFnok80gPHovKdI",
                    async: true,
                    success: function(data) {
                        alert(data)
                    },
                    error: function(data) {
                        alert(data)
                    }
                });
            }
        </script>
        <script>
        </script>
    </body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 10月23日
  • 已采纳回答 10月15日
  • 创建了问题 10月15日

悬赏问题

  • ¥15 AT89C51控制8位八段数码管显示时钟。
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口