zoukankan html css js c++ java

JS框架_(Qrcode.js)将你的内容转换成二维码格式

百度云盘　　传送门　　密码:304e

输入网址点击按钮生成二维码，默认为我的博客首页

二维码格式演示

<!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>Gary_请在下面输入框中输入内容</h1>
        <input type="text" placeholder="请在这里输入内容" id="demo">
        <button id="send">点击生成二维码</button>
           <br></br><br></br>
        <div id="qrcode"></div>
    </div>
    <p></p>
    <script src="js/qrcode.min.js"></script>
    <script>
    window.onload =function(){
        (function(){
            var defaultContent = 'http://www.cnblogs.com/1138720556Gary/';
            var content = document.getElementById("qrcode");
            var qrcode = new QRCode(content,{
                200,
                height:200
            });
            document.getElementById("send").onclick =function(){
                var value = document.getElementById("demo").value || defaultContent;
                qrcode.makeCode(value);
                content.style.display = "block";
            }
        })();
    }
</script>
</body>
</html>

index.html

实现过程：

　设置二维码的长宽

            var qrcode = new QRCode(content,{
                200,
                height:200
            });

　把输入网址或者默认网址传给二维码

            document.getElementById("send").onclick =function(){
                var value = document.getElementById("demo").value || defaultContent;
                qrcode.makeCode(value);
                content.style.display = "block";
            }

　页面内容加载完成之后立即执行window.onload加载事件相应的函数

<script src="js/qrcode.min.js"></script>
<script>
    window.onload =function(){
        (function(){
            var defaultContent = 'http://www.cnblogs.com/1138720556Gary/';
            var content = document.getElementById("qrcode");
            var qrcode = new QRCode(content,{
                200,
                height:200
            });
            document.getElementById("send").onclick =function(){
                var value = document.getElementById("demo").value || defaultContent;
                qrcode.makeCode(value);
                content.style.display = "block";
            }
        })();
    }
</script>

　将Js事件绑定到按钮

    <div class="lanren">
        <h1>Gary_请在下面输入框中输入内容</h1>
        <input type="text" placeholder="请在这里输入内容" id="demo">
        <button id="send">点击生成二维码</button>
           <br></br><br></br>
        <div id="qrcode"></div>
    </div>

(如需转载学习，请标明出处)

查看全文

相关阅读:
mac 10.15.7 修改PATH
oc 属性类型一般用法
 ubuntu解压zip文件名乱码
 telnet 退出
 docker 根据容器创建镜像
 mac android adb device 没有显示设备
 Yii2 查看所有的别名 alias
Yii2 App Advanced 添加 .gitignore
ubuntu 18.04 搜狗突然就提示乱码
 An error occured while deploying the file. This probably means that the app contains ARM native code and your Genymotion device cannot run ARM instructions. You should either build your native code to

原文地址：https://www.cnblogs.com/1138720556Gary/p/9383358.html