生成二维码需要引入qrcode.js和jquery.min.js

<!DOCTYPE html>

<head>

<title>二维码</title>

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

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/qrcode.js"></script>

</head>

<body>

<input id="text" type="text" value="www.baidu.com" style="width:200px;" />

<button id="btn" onclick="makeCode()">生成</button><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 : 200,

	height : 200

});

function makeCode () {

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

	qrcode.makeCode(elText.value);

}

</script>

</body>

</html>

生成二维码功能（js前端）的更多相关文章

  1. 4种方法生成二维码 （js 控制canvas 画出 二维码）

    随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计.  二维码原理: 二维条码/二维码可以分 ...

  2. 生成二维码的js以及调用打印插件

    插件: qrcode.js 插件下载网址:http://code.ciaoca.com/javascript/qrcode/ 用法实例: <script type="text/java ...

  3. Vue——前端生成二维码

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...

  4. QRCode.js生成二维码

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

  5. react生成二维码

    图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.m ...

  6. Android实例-实现扫描二维码并生成二维码(XE8+小米5)

    相关资料: 第三方资料太大没法写在博文上,请下载CSDN的程序包. 程序包下载: http://download.csdn.net/detail/zhujianqiangqq/9657186 注意事项 ...

  7. java小技术之生成二维码

    把我们需要的链接或者内容生成二维码其实是一件非常容易的事情,有很多办法可以实现,这里我们采用JS方法生成. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

  8. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  9. java生成二维码，读取（解析）二维码图片

    二维码分为好多种,我们最常用的是qrcode类型的二维码,以下有三种生成方式以及解析方式: 附所需jar包或者js地址 第一种:依赖qrcode.jar import java.awt.Color; ...

随机推荐

  1. Android Handler 内存泄漏问题

    1. 问题先看以下代码: 第一种写法: public class MainActivity extends AppCompatActivity { ... ... ... private class ...

  2. C++入门经典-例3.8-使用条件表达式判断一个数是否是3和5的整倍数

    1:代码如下: // 3.8.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  3. 第3周Java编程总结

    1.打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 2. 编写Java程序,求13-23+33-43+…+973-983+ ...

  4. Entity Framework Code First使用者的福音 --- EF Power Tool使用记之一

    下次会为大家深入解析这个小工具.  最先看到这个工具是在EF产品组最新的博客文章上,http://blogs.msdn.com/b/adonet/archive/2011/05/18/ef-power ...

  5. 下载的管理类MyDownloadManager

    import android.content.Intent; import android.net.Uri; import java.io.File; import java.io.FileOutpu ...

  6. Ubuntu系统下各种报错杂烩（持续更新）

    在Github时报Permanently added the RSA host key for IP address '192.30.252.128' to the list of known hos ...

  7. table 隔列换色

    $("table tr").find("td:eq(1),td:eq(2),td:eq(4)").css("background-color" ...

  8. 如何修改eclipse中的maven的仓库地址

    最近的有一个朋友问我如何修改eclipse的maven的本地仓库,我想了一下,这个玩意一般是不用修改的,主要是你本地安装的maven在哪个位置,一般的本地仓库位置在 C:\Users\username ...

  9. MySQL 常见面试知识点

    之前简单总结了一下MySQL的场景面试知识点 1.讲下MVCC原理 2.MySQL高可用架构介绍 3.OSC(在线更改表结构)原理 4.MySQL性能调优有哪些关键点/经验 5.MySQL在线备份方案 ...

  10. 【HTML】---HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...