1、下载jquery.qrcode.min.js(地址)
2、代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>生成二维码</title>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<style type="text/css">
#d{
position:relative;
}
.tip{
color:#bfbfbf;
}
img#send{
position:absolute; left:311px;z-index:1;
}
input#getval{
padding-right: 20px;
}
</style>
</head>
<body>
<div id="d">
<input type="text" id="getval" placeholder="例如:http://www.baidu.com" style="float:left;width:300px"/>
<img src="二维码.png" id="send" /><br>
<div class="tip">输入地址后,点击按钮自动生成二维码</div>
<div id="code" style="margin:auto; position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$('#send').click(function(){
$('#code').html("");
$('#code').qrcode({
render:"canvas",
width:120,
height:120,
correctLevel:0,
text:$('#getval').val()
});
});
});
</script>
</body>
</html>
3、实现效果