目录架构：

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. 洛谷 P1083 借教室

    传送门:Probem 1083 https://www.cnblogs.com/violet-acmer/p/9721160.html 一.暴力简述 首先我们不难看出,这道题--并不是一道多难的题,因 ...

  2. 面向对象【day07】：类的实例化过程剖析（三）

    本节内容 1.概述 2.类的语法 3.总结 一.概述 之前我们说关于python中的类,都一脸懵逼,都想说,类这么牛逼到底是什么,什么才是类?下面我们就来讲讲,什么是类?它具有哪些特性. 二.类的语法 ...

  3. golang锁

    golang锁包:https://studygolang.com/pkgdoc sync.Mutex是一个互斥锁 var lock sync.Mutex 加锁段在中 lock.lock() lock. ...

  4. Elasticsearch之中文分词器插件es-ik的自定义词库

    它在哪里呢? 非常重要! [hadoop@HadoopMaster custom]$ pwd/home/hadoop/app/elasticsearch-2.4.3/plugins/ik/config ...

  5. 【1】【JUC】Condition和生产者消费者模型

    本篇文章将介绍Condition的实现原理和基本使用方法,基本过程如下: 1.Condition提供了await()方法将当前线程阻塞,并提供signal()方法支持另外一个线程将已经阻塞的线程唤醒. ...

  6. HDU - 3002 King of Destruction（最小割）

    http://acm.hdu.edu.cn/showproblem.php?pid=3002   最小割模板 #include<iostream> #include<cmath> ...

  7. .Net进阶系列(15)-异步多线程(线程的特殊处理和深究委托赋值)（被替换）

    1. 线程的异常处理 我们经常会遇到一个场景,开启了多个线程,其中一个线程报错,导致整个程序崩溃.这并不是我们想要的,我需要的结果是,其中一个线程报错,默默的记录下,其它线程正常进行,保证程序整体可以 ...

  8. DotNetBar ButtonX添加下拉面板

    1. 2.在窗口上放一个控件 Control选择这个控件,即可,如果想让textBox下拉面板,需要使用textBoxDropDown,而不是textBoxX,DotNetBar的命名很奇怪.

  9. Python排序算法之选择排序

    选择排序 选择排序比较好理解,好像是在一堆大小不一的球中进行选择(以从小到大,先选最小球为例): 1. 选择一个基准球 2. 将基准球和余下的球进行一一比较,如果比基准球小,则进行交换 3. 第一轮过 ...

  10. 淘淘商城之spring web mvc架构

    一.什么是springmvc springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合: springmvc是一个基于mvc的web框架   二.mv ...