js生成二维码小工具

「爱情、让人受尽委屈。」 2022-09-08 15:52 140阅读 0赞

js完整代码，引用了qrcode.min.js ，jquery.min.js

效果图  
连接别忘记加上http://哦  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA44KGU29tbnLinKg_size_17_color_FFFFFF_t_70_g_se_x_16]  
代码中引用的qrcode.min.js ，jquery.min.js 可以去网上百度下载

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="./js/qrcode.min.js"></script>
      
      <style>
        .btn-wrap{
          display: flex;
          flex-wrap: nowrap;
        }
        body{
          padding:10px;
        }
        input{
          width: 300px;
          height: 34px;
          padding-left: 10px;
          margin-right: 5px;
          box-sizing: border-box;
        }
        button{
          border-radius: 0;
          width:100px;
          height: 34px;
          font-weight: 400;
          background: linear-gradient(45deg,#7bd6fe,#0072f0);
          outline: none;
          border:none;
          color:#fff;
        }
      </style>
    </head>
    <body>
      <div class="btn-wrap">
        <input type="text" placeholder="请输入网址" id="input" oninput="handleInput()"> <button id="button">生成二维码</button>
      </div>
      <div id="qrcode" style="margin-top:20px">
      </div>
      <script>
    
        document.getElementById("button").onclick=function(){
          handleInput();
          let inputDomValue = document.getElementById('input').value;
          if(!inputDomValue){
            alert("请输入网址");
            return 
          }
          var qrcode = new QRCode(document.getElementById("qrcode"), {
          text: inputDomValue,
          width: 128,
          height: 128,
          colorDark : "#000000",
          colorLight : "#ffffff",
        });
        }
     
        function handleInput(){
          let qrcode = document.getElementById('qrcode');
          qrcode.innerHTML="";
        }
      
      </script>
    </body>
    </html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA44KGU29tbnLinKg_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8030a15c92004d8a985824e1351ce058.png