<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

        <title></title>

        <style type="text/css">

            #qrcode {

                width:160px;

                height:160px;

                margin-top:15px;

            }

        </style>

    </head>

    <body>

        <input id="text" type="text" value="http://www.baidu.com" /><br />

        <div id="qrcode"></div>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var qrcode = new QRCode("qrcode");

            function makeCode () {

                var elText = document.getElementById("text");

                if (!elText.value) {

                    alert("Input a text");

                    elText.focus();

                    return;

                }

                qrcode.makeCode(elText.value);

            }

            makeCode();

            $("#text").on("blur", function () { //

                makeCode();

            }).on("keydown", function (e) {

                if (e.keyCode == 13) {

                    makeCode();

                }

            });

        </script>

    </body>

</html>

效果预览：

jQuery 自动生成二维码的更多相关文章

  1. jquery自动生成二维码

    把下面的jquery代码放到想要在当前页面上面生成二维码: 代码如下: <script type="text/javascript">var _qrContent='' ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  4. jQuery.qrcode 生成二维码，并使用 jszip、FileSaver 下载 zip 压缩包至本地。

    生成二维码 引用 jquery.qrcode.js  :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...

  5. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  6. （转）js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  7. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  8. 简单的 自动生成 二维码 PHP 方法

    方法一:<style type="text/css">.eweima{    width:200px; height:200px; margin:auto;}</ ...

  9. jQuery前端生成二维码

    引用: <script src="assets/js/jquery.qrcode.min.js" charset="UTF-8"></scri ...

随机推荐

  1. 如何用Python判断一个文件是否被占用？

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 今天有同学问,用os模块的access()能否判断一个文件是否被占用?直觉上,这是行不通的,因为ac ...

  2. 使用mybatis-generator插件结合tk.mybatis自动生成mapper

    本篇文章将介绍使用spring boot框架,引入mybatis-generator插件,结合tk.mybatis自动生成Mapper和Entity的一整套流程,其中包括最重要的踩坑与填坑.     ...

  3. js对flv提取h264、aac音视频流

    FLV提取里面的h264视频流 FLV和MP4支持的编码 流媒体和媒体文件的区别 流媒体是指将一连串的多媒体资料压缩后,经过互联网分段发送资料,在互联网上即时传输影音以供观赏的一种技术与过程,此技术使 ...

  4. Mac如何下载软件

    1.App Store  2.软件官网   3.Mac软件网站  4.搜狗微信 个人首选App Store,里面的软件安全可靠,其次就是官网,必不得已才去其他网站下载,毕竟不是App Store或官网 ...

  5. new 的原理和实现

    new 运算符内部做了如下四个操作: 创建一个空的简单 JavaScript 对象(即{}): 链接新对象(即设置该新对象的构造函数)到函数对象: 将新创建的对象作为 this 的上下文: 如果该函数 ...

  6. SpringBoot进阶教程(六十九)ApplicationContextAware

    在某些特殊的情况下,Bean需要实现某个功能,但该功能必须借助于Spring容器才能实现,此时就必须让该Bean先获取Spring容器,然后借助于Spring容器实现该功能.为了让Bean获取它所在的 ...

  7. C语言实现的多线程定时器

    目录 1. 大致功能介绍 2. API库介绍 3. 一个例子 4. 库文件源码 注意事项 1. 大致功能介绍 实现任务列表,定时器会间隔一段时间遍历列表发现要执行的任务 任务列表中的所有任务并行执行 ...

  8. .NET 云原生架构师训练营（模块二 基础巩固 MongoDB 写入和查询）--学习笔记

    2.5.3 MongoDB -- 写入和查询 写入 查询 查找操作符 逻辑操作符 其他 嵌套对象 数组 游标方法 写入 https://docs.mongodb.com/manual/tutorial ...

  9. java注解学习笔记总结

    注解的理解 ① jdk 5.0 新增的功能 ② Annotation 其实就是代码里的特殊标记, 这些标记可以在编译, 类加载, 运行时被读取, 并执行相应的处理.通过使用 Annotation,程序 ...

  10. 史上最全的pycharm快捷键！快进来点个收藏吧

    Alt+Enter 自动添加包 Ctrl+t SVN更新 Ctrl+k SVN提交 [编辑类:](https://link.zhihu.com/?target=https://www.jianshu. ...