js檔案下載下傳位址：https://download.csdn.net/download/weixin_38296752/10554485
一.引入qrcode.js檔案
<script type="text/javascript" src="imgs/js/qrcode.js"></script>
二.定義用于展示二維碼的div 并設定樣式
<style type="text/css">
#qrcode{
position: absolute;
left: 50%;
top: 50%;
/* margin-top:-200px;
margin-left:-200px; */
margin:-200px 0 0 -200px;
}
</style>
<body>
<div id="qrcode"></div>
</body>
三.js中生成二維碼
window.onload=function(){
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 400,//設定寬高
height : 400
});
qrcode.makeCode("二維碼内容");
}
四.完整示例
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js生成二維碼</title>
</head>
<script type="text/javascript" src="imgs/js/qrcode.js"></script>
<script type="text/javascript">
window.onload=function(){
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 400,//設定寬高
height : 400
});
qrcode.makeCode("二維碼内容");
}
</script>
<style type="text/css">
#qrcode{
position: absolute;
left: 50%;
top: 50%;
/* margin-top:-200px;
margin-left:-200px; */
margin:-200px 0 0 -200px;
}
</style>
<body>
<div id="qrcode"></div>
</body>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)