div輸入需要的資料,使用qrcode,點選生成二維碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>該二維碼支援中文和LOGO</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/utf.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript">
var btn = function () {
$("#qrcodeCanvas").qrcode({
render: "canvas", //設定渲染方式,有table和canvas,使用canvas方式渲染效能相對來說比較好
text: "編碼:" + $("#ww").val() + "\n" + "編碼:" + $("#ww1").val(), //掃描二維碼後顯示的內容,可以直接填一個網址,掃描二維碼後自動跳向該連結
width: "400", //二維碼的寬度
height: "400", //二維碼的高度
background: "#ffffff", //二維碼的後景色
foreground: "#000000", //二維碼的前景色
src: 'img/1.jpg' //二維碼中間的圖片
});
}
</script>
</head>
<body>
<center>
<div id="" style="float: left;">
編碼:
<input id="ww" type="text" /><br/>
編碼:
<input id="ww1" type="text" /><br/>
<input type="button" name="" id="btn" onclick="btn()" value="點選生成" style="width: 150px;height: 50px;border: none;" />
</div>
<div id="qrcodeCanvas" style="float: left;"></div>
</center>
</body>
</html>
效果如圖所示