生成二维码需要引入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. HBase2.0新特性解析

    作者 | 个推大数据运维工程师 行者 升级背景 个推作为专业的数据智能服务商,在业务开展过程中存在海量的数据存储与查询的需求,为此个推选用了高可靠.高性能.面向列.可伸缩的分布式数据存储系统--HBa ...

  2. 新建Spring boot 启动报错 Failed to auto-configure a DataSource

    今天学习springboot,使用idea创建项目.在选择组件时添加了mysq 然后在第一次启动的时候启动报错,错误信息如下: ***************************APPLICATI ...

  3. 一、基础篇--1.2Java集合-List、Set、Map区别

     List.Set.Map区别 三者关系如下: 结构特点 1.List和Set是存储单列数据集合,Map是存储键值对这样的双列数据集合: 2.List中存储的数据都是有序的,并且允许重复:Map中存储 ...

  4. oracle的闪回功能

    ORACLE的闪回功能: navicat 执行删改语句 不用提交直接执行? 感觉很恐怖? 今天一不下心手一滑 选错 结果把数据库的字段全改了 很慌 然后发现 oracle 有一个闪回功能 专门用来补天 ...

  5. Junit : how to add listener, and how to extends RunListener to override behaviors while failed

    http://junit.sourceforge.net/javadoc/org/junit/runner/notification/RunListener.html org.junit.runner ...

  6. HSV颜色识别-HSV基本颜色分量范围

    原文地址:https://blog.csdn.net/taily_duan/article/details/51506776 一般对颜色空间的图像进行有效处理都是在HSV空间进行的,然后对于基本色中对 ...

  7. jenkins docker 发布

    分享下怎么使用jenkins 发布 docker   首先准备docker的相关部分 docker tomcat基础镜像,这边使用centos7做系统,dockerfile如下: #tomcat基础镜 ...

  8. BigDecimal 的一点想法

    1.java中会有精度问题,比如: double d1 = 2.0; double d2 = 1.7; System.out.println(d1-d2);//0.30000000000000004 ...

  9. MyBatis框架原理2：SqlSession运行过程

    获取SqlSession对象 SqlSession session = sqlSessionFactory.openSession(); 首先通过SqlSessionFactory的openSessi ...

  10. 【HANA系列】SAP 【第二篇】EXCEL连接SAP HANA的方法（ODBC）

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP [第二篇]EXCEL连接 ...