生成二维码需要引入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. uswgi

    1.安装uwsgi注意: 1)在系统环境安装,非虚拟环境 2)使用对应python版本安装 3)要先安装python开发包 ###sudo apt-get install python3.6-dev ...

  2. Div内容居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. leetcode 63 不同路径II

    二维数组动态规划,还可以采用一维数组进行动态规划. class Solution { public: int uniquePathsWithObstacles(vector<vector< ...

  4. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  5. CompletableFuture引入

    一.Future介绍 Future以前我们如果有个方法action执行,比如去数据库中查询数据.上传一个文件等,这个方法执行10分钟,调用者就需要等10分钟.基于此,调用者可以先执行action,返回 ...

  6. docker扩容

    方法一. https://www.cnblogs.com/atuotuo/p/7217331.html 只需要修改 dockerd 的启动参数啊 增加 --data-root 把 /var/lib/d ...

  7. Prometheus告警模型分析

    Prometheus作为时下最为流行的开源监控系统,其庞大的生态体系:包括针对各种传统应用的Exporter,完整的二次开发工具链,与Kubernetes等主流平台的高度亲和以及由此带来的强大的自发现 ...

  8. BigDecimal 的一点想法

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

  9. 高级测试工程师面试必问面试基础整理——python基础（一）（首发公众号：子安之路）

    现在深圳市场行情,高级测试工程师因为都需要对编程语言有较高的要求,但是大部分又没有python笔试机试题,所以面试必问python基础,这里我整理一下python基本概念,陆续收集到面试中python ...

  10. kh67-wjs

    个人简历 基本信息 姓    名:                           性    别: 年    龄:                                籍    贯: 联 ...