百度云盘　　传送门　　密码: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. 附录1：arrayanalysis的本地使用（质量控制）

    访问:https://github.com/BiGCAT-UM/affyQC_Module,点击“Download ZIP”,下载得到affyQC_Module-master.zip,解压得到一个af ...

  2. 9.用ExecuteSqlCommand执行存储过程

    比如你有一个存储过程 IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[CreateAutho ...

  3. 简单 UDP 操作类

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.Ne ...

  4. 浅析java中clone（）方法

    本文转载自:http://blog.csdn.net/mengxiangyue/article/details/6818611 Java中我们可能都遇到过这样的情况,在我们将一个对象做为参数传给一个函 ...

  5. luogu P4006 小 Y 和二叉树

    luogu loj 可以发现度数\(< 3\)的点可以作为先序遍历的第一个点,那么就把度数\(< 3\)的编号最小的点作为第一个点.然后现在要确定它的左右儿子(或者是右儿子和父亲).我们把 ...

  6. CentOS7搭建FastDFS V5.11分布式文件系统（一）

    1.绪论 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家分享一下.FastDFS的作者淘宝资深架 ...

  7. 微信小程序刮刮乐

    <view class="scratch_body"> <image class="scratch_body_bg" mode="w ...

  8. python tkinter 基本使用

    这里只放表格和一个控件基本属性 grid(**options) 属性-- 下方表格详细列举了各个选项的具体含义和用法: 选项 含义column 1. 指定组件插入的列(0 表示第 1 列)2. 默认值 ...

  9. HashMap并发分析

    我们听过并发情况下的HashMap,会出现成环的情况,现在,我就来总结一下它成环的过程. 一言以蔽之,就是他在resize的时候,会改变元素的next指针. 之前在一篇博客里提到,HashMap的re ...

  10. 解决 android studio 出现:"AndroidStudio:Could not GET 'https://dl.google.com Received status code 400 from server: Bad Request"问题

    一.android studio 编译项目时出现"AndroidStudio:Could not GET 'https://dl.google.com Received status cod ...