百度云盘　　传送门　　密码: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. 简单的shell练习

    1.判断/etc/inittab文件是否大于100行,如果大于,则显示”/etc/inittab is a big file.”否者显示”/etc/inittab is a small file.”# ...

  2. Hive 教程(二)-认知hive

    在大数据领域,hive 的位置非常重要,排名前三的大数据工具为 spark.hive.kafka 什么是hive 在大数据领域有 3 种需求场景:传输.存储.计算: hive 是一个处理海量的结构化数 ...

  3. 错误：SyntaxError: identifier starts immediately after numeric literal

    转载:http://blog.csdn.net/shalousun/article/details/39995443在用JavaScript时,当你使用一个字符传作为函数的参数常常会看到语法错误,在f ...

  4. tasks.json 配置 解决vscode控制台乱码问题

    { "version": "2.0.0", "command": "dotnet", "tasks" ...

  5. 分布式的几件小事（六）dubbo如何做服务治理、服务降级以及重试

    1.服务治理 服务治理主要作用是改变运行时服务的行为和选址逻辑,达到限流,权重配置等目的. ①调用链路自动生成 一个大型的分布式系统,会由大量的服务组成,那么这些服务之间的依赖关系和调用链路会很复杂, ...

  6. Js阻止冒泡，Vue中如何阻止冒泡事件

    js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...

  7. JS中的事件传播流程

    JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

  8. linux chattr：配置文件隐藏属性;lsattr：显示文件属性

    1    chattr [+-=][ASadistu] 文件或目录名称 选项与参数: + :在原有参数设定基础上,追加参数.- :在原有参数设定基础上,移除参数.= :更新为指定参数设定.A:文件或目 ...

  9. fiddler获取响应时间以及服务器IP

    抓包工具fiddler实现http协议请求应答抓包.在接口测试.性能测试.安全测试等软件测试活动过程中,可能会遇到需要获取接口响应时间.接口服务器IP这样的情况.默认情况下fiddler不支持接口响应 ...

  10. autocomplete用法

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