生成二维码功能（js前端）
生成二维码需要引入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前端）的更多相关文章
- 4种方法生成二维码 （js 控制canvas 画出 二维码）
随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计. 二维码原理: 二维条码/二维码可以分 ...
- 生成二维码的js以及调用打印插件
插件: qrcode.js 插件下载网址:http://code.ciaoca.com/javascript/qrcode/ 用法实例: <script type="text/java ...
- Vue——前端生成二维码
与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...
- QRCode.js生成二维码
QRCode的GitHub地址: https://github.com/KeeeX/qrcodejs 该版本解决了主版本(https://github.com/davidshimjs/qrcodejs ...
- react生成二维码
图片实例: 简介: QRCode.js 是一个生成二维码的JS库.主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库. 用法: 1. 在项目中引入qrcode.m ...
- Android实例-实现扫描二维码并生成二维码(XE8+小米5)
相关资料: 第三方资料太大没法写在博文上,请下载CSDN的程序包. 程序包下载: http://download.csdn.net/detail/zhujianqiangqq/9657186 注意事项 ...
- java小技术之生成二维码
把我们需要的链接或者内容生成二维码其实是一件非常容易的事情,有很多办法可以实现,这里我们采用JS方法生成. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
- jquery生成二维码并实现图片下载
1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...
- java生成二维码，读取（解析）二维码图片
二维码分为好多种,我们最常用的是qrcode类型的二维码,以下有三种生成方式以及解析方式: 附所需jar包或者js地址 第一种:依赖qrcode.jar import java.awt.Color; ...
随机推荐
- 20道HTML基础面试题（附答案）
以下是我整理的一些HTML的基础面试体,并自己整理了答案. 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档.DOCTYPE不存 ...
- Emacs Python 自动补全之 eglot
eglot 个人水平有限,自己的测试难免有不足甚至错误的地方.欢迎各位emacser 能前来留言交流. 首先eglot 是一个lsp-mode的集成环境.作者说这不仅仅是一个lsp工具.但是我从其说明 ...
- Android共享元素场景切换动画的实现
安卓5.0系统引入了共享元素,能做出非常炫酷的场景切换效果,这让人非常兴奋同时非常蛋疼,因为低版本没法使用啊,所以今天就跟大家分享一下自己写的一个库,其实只有2个文件而已就可以兼容安卓5.0以下的版本 ...
- 代码实现:企业发放的奖金根据利润提成。利润(I)低于或等于10万元时，奖金可提10%； 利润高于10万元，低于20万元时，低于10万元的部分按10%提成，高于10万元的部分，可可提成7.5%； 20万到40万之间时，高于20万元的部分，可提成5%；40万到60万之间时高于40万元的部分，可提成3%； 60万到100万之间时，高于60万元的部分，可提成1.5%，高于100万元时，超过100万元
import java.util.Scanner; /* 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成 ...
- Ubuntu 防火墙常用配置操作（ufw）【适用于 Debian 及其衍生版---Linux Mint、Deepin 等】-转
Ubuntu 防火墙常用配置操作(ufw)[适用于 Debian 及其衍生版---Linux Mint.Deepin 等] 点击访问
- http协议详解之响应报文 3
--------------响应示例--------------------------response#状态行HTTP/1.1 200 OK #协议及版本号.状态码.状态描述 #消息报头Date: ...
- nodejs 框架 中文express 4.xxx中文API手册
介于最近express 中文文档比较难找的现状,特地找了一个,供大家学习思考 Express 4.x API express 翻译 api文档 中文 -- express() expre ...
- Elasticsearch 6.2.3版本 执行聚合报错 Fielddata is disabled on text fields by default
背景说明 执行<Elasticsearch 权威指南>的示例,在执行聚合查询的时候,报错 Fielddata is disabled on text fields by default. ...
- 如图 honehoneclock
如图人体时钟 honehoneclock 页面演示来自http://chabudai.org/blog/?p=59 <embed name="honehoneclock" ...
- Opencv中copyTo()函数的使用方法
在Mat矩阵类的成员函数中copyTo(roi , mask)函数是非常有用的一个函数,尤其是后面的mask可以实现蒙版的功能,我们用几个实例来说明它的作用.我们要注意mask的数据类型,必须是CV_ ...