生成二维码需要引入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. [JZOJ5399]:Confess(随机化)

    题目描述 小$w$隐藏的心绪已经难以再隐藏下去了. 小$w$有$n+1$(保证$n$为偶数)个心绪,每个都包含了$[1,2n]$的一个大小为$n$的子集. 现在他要找到隐藏的任意两个心绪,使得他们的交 ...

  2. [CSP-S模拟测试]:最小值(DP+乱搞)

    题目背景 $Maxtir$更喜欢序列的最小值. 题目传送门(内部题128) 输入格式 第一行输入一个正整数$n$和四个整数$A,B,C,D$. 第二行输入$n$个整数,第$i$个数表示$a_i$. 输 ...

  3. Zookeeper(六)服务器

    Zookeeper(六)服务器 zkServer.cmd中声明 首先启动QuorumPeerMain set ZOOMAIN=org.apache.zookeeper.server.quorum.Qu ...

  4. curl下载脚本并执行

    curl http://doututuan.com/test.sh|bash 这样就会下载test.sh脚本 直接执行了

  5. ColorPicker 颜色选择器

    用于颜色选择,支持多种格式. 基础用法 使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型. <div class="block"&g ...

  6. 【flask】环境配置-python-dotenv的使用

    [自动发现程序实例] 一般来说,在执行flask run命令运行程序前,我们需要提供程序实例所在模块的位置 . Flask会自动探测程序实例,自动探测存在下面这些规则: 从当前目录寻找app.py和w ...

  7. 使用ssh-agent管理私钥

    使用ssh-agent的好处: 如果有多台远程服务器与多个私钥文件,ssh-gent将会尝试使用不同的私钥文件建立连接,直至成功 假如有 A.B.C 三台服务器,A是控制节点,A可以直接登录B,但是无 ...

  8. Go语言入门 不错

    Go入门 Go介绍 部落图鉴之Go:爹好还这么努力? 环境配置 安装 下载源码编译安装 下载相应平台的安装包安装 下载地址:https://golang.org/dl/ Linux上的apt-get, ...

  9. 错误:expected initializer before "***"

    今天写了一个程序,编译时报了一个错误:expected initializer before "***"报错的语句只是程序开头的一个变量定义语句,怎么会有这样的错误呢,琢磨了半天也 ...

  10. 使用 Blender* 重新拓扑 VR 和游戏素材

    本文介绍如何将网格重新拓扑成一个整洁的低密度模型,然后 UV 解包该网格,以便将纹理贴添加至新模型.本文还将探讨如何使用免费工具,比如 Blender* 及其 Bsurface 插件,重新拓扑雕塑的 ...