百度云盘　　传送门　　密码: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,{

                width: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,{

                width: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,{

                width: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>
 
 
 
 

JS框架_(Qrcode.js)将你的内容转换成二维码格式的更多相关文章

  1. qrcode.js插件将你的内容转换成二维码格式

    ---qrcode.js插件将你的内容转换成二维码格式--- 我之前一直想知道二维码是怎么生成,所以就了解了一下, 最后还是不知道它的原理, 但是,我知道怎么生成. 现在就让我带你制作一个你喜爱的二维 ...

  2. 利用 Python django 框架 输入汉字，数字，字符，等。。转成二维码！

    利用 Python django 框架 输入汉字,数字,字符,等..转成二维码! 模块必备:Python环境 + pillow  + qrcode 模块 核心代码import qrcode qr = ...

  3. C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别

    这两天撸了一个需求,通过 JS  调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...

  4. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  5. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  6. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  7. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  8. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  9. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

随机推荐

  1. # Doing homework again（贪心）

    # Doing homework again(贪心) 题目链接:Click here~~ 题意: 有 n 门作业,每门作业都有自己的截止期限,当超过截止期限还没有完成作业,就会扣掉相应的分数.问如何才 ...

  2. 导出excel-文件流

    后台代码(控制器或者dao层) public void Excel(){ //第一步:(1)以虚拟表的形式获取导出数据 DataTable dt_0 = this.service.Excel(); / ...

  3. 关于tomcat部署项目的问题

    问题是这样的 之前用tomcat8.5部署的项目,结果启动项目一直三个端口被占用,浏览器也打不开目标网页 卸了8,装了9.先配置的一大堆,结果可以打开Tomcat的主页locahost:8080,到此 ...

  4. JavaScript快速排序法实现数组排序

    大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...

  5. Spark运行时的内核架构以及架构思考

    一: Spark内核架构 1,Drive是运行程序的时候有main方法,并且会创建SparkContext对象,是程序运行调度的中心,向Master注册程序,然后Master分配资源. 应用程序: A ...

  6. 关于catopen函数

    关于catopen函数: 参考网址:http://pubs.opengroup.org/onlinepubs/009695399/functions/catopen.html 1)编辑消息文件 [ro ...

  7. 关于IDEA的application.properties读取乱码,以及显示乱码问题

    设置编码 如果设置之后还是不成功,就重启IDEA 再不行就删除application.properties重新编辑, 我采用的是注释掉要读取的中文部分,再下面再写一行

  8. 常用的商业级和免费开源Web漏洞扫描工具

    Scanv 国内著名的商业级在线漏洞扫描.可以长期关注,经常会有免费活动.SCANV具备自动探测发现无主资产.僵尸资产的功能,并对资产进行全生命周期的管理.主动进行网络主机探测.端口探测扫描,硬件特性 ...

  9. Navicat连接Mysql11.1.13出现1251错误

    打开Navicat软件,单击左上角[连接]按钮,选择mysql,弹出新建连接,输入相关信息,单击[连接测试],报1251的错误,如下图所示: 根因分析: mysql8 之前的版本中加密规则是mysql ...

  10. autocomplete用法

    今天又使用到 jquery-ui.min.js中的autocomplete这个方法了,记得第一次是在实习的时候已经是一年前了,现在只记得个模样了,所以去找了原来的代码,整理的半天才有理顺,这里分享一下 ...