百度云盘　　传送门　　密码: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. PHP 补零操作

    str_pad(string,length,pad_string,pad_type)//参数 描述string //必需.规定要填充的字符串.length //必需.规定新的字符串长度.如果该值小于字 ...

  2. 2019年8月23日 星期五（Workerman）

    Workerman,高性能socket服务框架 Workerman是什么? Workerman是一款纯PHP开发的开源高性能的PHP socket 服务框架. Workerman不是重复造轮子,它不是 ...

  3. Get MySQL这5个优化技巧

    一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇文章主要谈谈MySQL数据库在发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大 ...

  4. yii自定义验证

    自定义验证类 class BaseModel extends Model { public function rules() { return [ ['obj', ContentSecurityVal ...

  5. 启动web项目报错：The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.

    解决: 在application.properties配置文件中的添加标红部分 spring.datasource.url=jdbc:mysql://127.0.0.1:3306/miaosha?se ...

  6. python 基于detectron或mask_rcnn的mask遮罩区域进行图片截取

    基于示例infer_simple.py 修改165行vis_utils.vis_one_image为vis_utils.vis_one_image_opencv 在detectron.utils.vi ...

  7. python多线程之_thread

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  8. Java注解的继承

    注解继承的说明 1.首先要想Annotation能被继承,需要在注解定义的时候加上@Inherited,并且如果要被反射应用的话,就需要还有个事@Retention(RetentionPolicy.R ...

  9. dumpe2fs Linux支持的文件系统

    dumpe2fs  (-bh)装置文件名 选项与参数: -b : 列出保留为坏轨的部分 -h : 仅列出superblock的数据,不会列出其他的区段内容 查看Linux支持的文件系统哪些支持: ls ...

  10. win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结

    win10操作系统下oracle11g客户端/服务端的下载安装配置卸载总结 一:前提 注意:现在有两种安装的方式 1. oracle11g服务端(64位)+oracle客户端(32位)+plsql(3 ...