qrcode.js插件,将文字内容转换成二维码格式
其中已经包括了qrcode.js,style.css,index.html共三个文件
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qrcode.js插件将你的内容转换成二维码格式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lanren">
<h1>请在下面输入框中输入内容</h1>
<input type="text" placeholder="请在这里输入内容" id="demo">
<button id="send">点击生成二维码</button>
<div id="qrcode"></div>
</div>
<script src="js/qrcode.js"></script>
<script>
window.onload = function() {
var content = document.getElementById("qrcode");//放二维码的容器
var qrcode = new QRCode(content, {
width: 200,
height: 200
});
document.getElementById("send").onclick = function() {
var value = document.getElementById("demo").value;//文字内容信息
qrcode.makeCode(value);//将文字内容信息生成二维码
content.style.display = "block";//显示二维码
}
}
</script>
</body>
</html>
style.css :
.lanren {
width: 500px;
height: auto;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
.lanren #qrcode {
width: 200px;
height: 200px;
position: relative;
margin: 10px auto;
display: none;
}
.lanren input {
width: 200px;
height: 20px;
line-height: 20px;
padding: 4px;
outline: 0;
}
.lanren button {
display: block;
width: 120px;
height: 45px;
background: #0cc;
text-align: center;
line-height: 45px;
border-radius: 45px;
margin: 5px auto;
border: none;
cursor: pointer;
color: #fff;
outline: 0;
}
qrcode.js :