JS生成二维码(兼容各种浏览器及中文）

最新推荐文章于 2020-08-14 17:25:35 发布

雪莲的博客

最新推荐文章于 2020-08-14 17:25:35 发布

阅读量935

点赞数

分类专栏：我的随记

我的随记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文将介绍如何使用js生成二维码，兼容各种浏览器及手机端，支持中文。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JS 生成二维码 </title>
<script src="qrcode.js"></script>
<script type="text/javascript">
window.onload = function(){   
 // 二维码对象    var qrcode;   
 // 默认设置    var content;    
var size;  
  // 设置点击事件  
  document.getElementById("send").onclick =function(){      
  // 获取内容      
  content = document.getElementById("content").value;   
     content = content.replace(/(^\s*)|(\s*$)/g, "");   
     // 获取尺寸       
 size = document.getElementById("size").value;     
   // 检查内容      
  if(content==''){          
  alert('请输入内容！');        
    return false;        }     
   // 检查尺寸      
  if(!/^[0-9]*[1-9][0-9]*$/.test(size)){          
  alert('请输入正整数');       
     return false;        
}      
  if(size<100 || size>500){  
          alert('尺寸范围在100～500');  
          return false;     
   }      
  // 清除上一次的二维码       
 if(qrcode){          
  qrcode.clear();      
  }        
// 创建二维码       
 qrcode = new QRCode(document.getElementById("qrcode"), {      
      width : size,//设置宽高         
   height : size       
 });       
 qrcode.makeCode(document.getElementById("content").value);   
 }}</script>
</head>
<body>  
  <p>内容：<input type="text" id="content" value="https://www.baidu.com" /></p>  
  <p>尺寸：<input type="text" id="size" value="150"></p>    
<p><button id="send">生成二维码</button></p>   
 <div id="qrcode"></div>
</body>
</html>
请自行下载qrcode.js文件