<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QR CODE</title>
<style>
body{
text-align:center;
}
.qrcodediv{
margin:2em;
text-align:center;
}
.qrcodediv img{
margin-left:auto;
margin-right:auto;
}
#url{
width:20em;
padding:1em;
margin:1em;
border-radius:1em;
color:#ff6666;
}
.urlp{
margin-top:2em;
color:#ff6666;
}
input[type="button"]{
width:20em;
padding:1em;
margin:1em;
border-radius:1em;
color:#ff6666;
}
input[type="button"]:hover{
background-color:#ff6666;
color:#ffffff;
}
</style>
<script src="qrcode.min.js"></script>
</head>
<body>
<input type="text" id="url" />
<br/>
<input type="button" id="enter" value="生成二維碼" onclick="generateQRCode()"/>
<div id="qrcode"></div>
<script>
function generateQRCode(){
var href=document.getElementById("url").value;
var urlp=document.createElement("p");
urlp.className="urlp";
urlp.innerHTML=href;
document.body.appendChild(urlp);
var e=document.createElement("div");
e.className="qrcodediv";
document.body.appendChild(e);
var qrcode = new QRCode(e, {
text:href,
width: 300,
height: 300,
colorDark : "#ff6666",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
</script>
</body>
</html>
