如何用qrcode获取动态二维码?

171 阅读1分钟

方法1:引入qrcode的jq库文件

//引入cdn文件,基于jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

//style 设置样式
  #qrcode{
     text-align:center;
     padding:50px 0 100px 0;
 }

//html 网页标签
 <div>
     <div id="qrcode"></div> 
 </div>

//js
<script>
 var url="https://gsm08.linkdood.cn:9000/ToRegisterUser?uId=AA11AAMV328C6868UAG1R70E&elogo=m08vakknwhzy"
 $('#qrcode').qrcode({
  render: 'canvas', // 或者 'canvas'
  height: 140,
  width: 140,
  text: url, // 内容
  typeNumber:-1, // 计算模式
  correctLevel:2, // 二维码纠错级别
  background:"#ffffff", // 背景颜色
  foreground:"#000000"  // 二维码颜色
 })                            
</script>    

方法2:引入qrcode的构造函数文件

//引入cdn文件
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

//style 设置样式
#qrcode{
    padding: 30px 0 70px 0;
    display:flex;
    justify-content:center;
}

//html
<div id="qrcode" style="margin-top:15px;"></div>

//js
<script type="text/javascript">
 var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 200,
        height : 200,
                                
 });
 qrcode.makeCode("http://www.runoob.com");
</script>