目录架构:

index.html
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>Javascript 二维码生成库:QRCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/qrcode.min.js"></script>
</head>
<body>
<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div> <script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
}); 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>
页面效果:



资源文件请访问本人github地址:https://github.com/raind33/HTML5/tree/master/h5js%E7%94%9F%E6%88%90%E4%BA%8C%E7%BB%B4%E7%A0%81

h5之js生成二维码的更多相关文章

  1. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  2. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  3. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

  4. QRCode.js生成二维码

    QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...

  5. js生成二维码以及点击下载二维码

    js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...

  6. php--------使用js生成二维码

    php生成二维码有多种方式,可以在JS中,也可以使用php库,今天写的这个小案例是使用JS生成二维码. 其他方式可以看下一篇文章:php--------php库生成二维码和有logo的二维码 网站开发 ...

  7. Java与JS生成二维码

    1.二维码概念 二维码/二维条码是用某种特定的集合图形按一定规律在平面上(二维方向上)分布的黑白相间的图形记录数据符号信息的图片. 黑线是二进制的1,空白的地方是二进制的0,通过1.0这种数据组合用于 ...

  8. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  9. java和js生成二维码

    1. java生成二维码 1.1 依赖jar包配置(使用maven依赖) <dependency> <groupId>com.google.zxing</groupId& ...

随机推荐

  1. Solr各个版本重大变化之安装方式【请别违背规律】

    这里主要讲安装方式的变化 4.x~5.x的变化 这是4.x的安装方式,大家都熟知,在我看来未免繁琐了一点. 或许官方也感觉繁琐了,于是5.x有个最大的改变.↓ 现在Solr是一个独立的服务器 什么叫S ...

  2. springboot的跨域

    https://www.cnblogs.com/520playboy/p/7306008.html 1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出 ...

  3. js动画最佳实现——requestAnimationFrame

    我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≍16.67) var dis = 0,tim ...

  4. 1、Python-HelloWorld

    安装 环境下载 https://www.python.org/downloads/ IDE(PyCharm)下载 https://www.jetbrains.com/pycharm/download/ ...

  5. redis的入门篇----启动和关闭

    废话不多说  本博主要的内容是redis的常见命令 redis分为服务端和客户端 服务端的启动方式: redis-server redis-server ${redis.conf}    //后面是一 ...

  6. Kanboard简单的可视化任务板,项目管理

    采用docker安装 简单快捷 下载 docker pull kanboard/kanboard:latest 运行 docker run -d --name kanboard -p 10080:80 ...

  7. Ruby数组的操作

    数组的创建arr = Array.new num #创建num个元素的数组,所有数组元素为nilarr = Array.new num, elem #创建num个元素的数组,所有数组元素为elemar ...

  8. C语言上机复习(一)文件操作

    C语言—文件操作 1.1 fgetc() + fputc(): 以 字符 形式存取数据定义文件指针 #define _CRT_SECURE_NO_WARNINGS #include <cstdi ...

  9. luogu 4401 矿工配餐 多维dp

    五维dp,记忆化搜索会MLE超内存,所以用滚动数组,十分经典 五维dp #include <bits/stdc++.h> using namespace std; ; ][][][],la ...

  10. UE4联机编译光照

    UE4联机编译光照需要SwarmCoordinator以及SwarmAgent,在Engine\Binaries\DotNET目录下. SwarmAgent 我们主要关注Distribution Se ...