生成二维码代码

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、实现效果
这里写图片描述

猜你喜欢

转载自blog.csdn.net/dj_fairy/article/details/78676286
今日推荐