百度云盘　　传送门　　密码: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. centos7安装activemq5.15

    1. 官网下载 http://activemq.apache.org/components/classic/download/ 上传到服务器 2. 安装 tar zxf apache-activemq ...

  2. Jmeter的操作流程

    1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web 应用测试,但后来扩展到其他测试领域 ...

  3. The Party and Sweets CodeForces - 1159C (拓排)

    优化连边然后拓排. #include <iostream> #include <sstream> #include <algorithm> #include < ...

  4. Apache+tomcat ajp模式转发域名

    本示例使用Apache24 和 tomcat7.0.62 本机IP:192.168.10.38 要实现的效果 访问来源 192.168.10.38      ---->apache ----&g ...

  5. Chrome开发者工具详解（一）之使用断点来调试代码上

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断 ...

  6. es6编译器（babel搭建）

    1.安装Node.js,初始化项目 npm init -y 2.安装babel-cli(兼容至ie7) npm i @babel/core @babel/cli @babel/preset-env - ...

  7. 判断页面是在移动端还是PC端打开的

    $(function () { var curWwwPath = window.document.location.href; var pathName = window.document.locat ...

  8. python、mysql三-1:存储引擎

    一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型 ...

  9. 你在和脚本谈恋爱(自动化在IM聊天中的应用)

    谢谢打开这篇文章的每个你 测开之分层自动化(Python)招生简章 Python自动化测试报告美化 在python中进行数据驱动测试 太嚣张了!他竟用Python绕过了“验证码” 在网络世界里你不知道 ...

  10. PAT Basic 1011 A+B 和 C (15 分)

    给定区间 [−] 内的 3 个整数 A.B 和 C,请判断 A+B 是否大于 C. 输入格式: 输入第 1 行给出正整数 T (≤),是测试用例的个数.随后给出 T 组测试用例,每组占一行,顺序给出  ...