生成二维码需要引入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. python学习之路（15）

    map/reduce Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on ...

  2. MySQL格式化小数点为百分号并保留2为小数

    #colname为字段名字,CONCAT的作用是把小数点转成百分号,TRUNCATE的作用是保留百分号的小数点成几位 SELECT CONCAT(TRUNCATE(colname*100,2),'%' ...

  3. C++入门经典-例6.7-字符串比较

    1:strcmp函数,用于比较两个字符串.格式如下: strcmp(字符数组名1,字符数组名2) 按照ASCII码,按顺序比较两个数组中的字符,并由函数返回值返回比较结果的执行过程. (1)各自选中自 ...

  4. yue

    1. 字节流与二进制文件 1.我的代码 public class Student { private int id; private String name; private int age; pri ...

  5. ES6 知识拓展

    1.冻结对象 Object.freeze(obj) 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性.可配置性 ...

  6. Struts2-Ajax整合之纯JavaScript版本

    1.Ajax的作用:能够在不重新加载页面的情况下,用异步的方式与后台服务器进行数据交互 2.Struts2-Json的jar包(包含阿里巴巴自己的jar包) commons-beanutils-1.7 ...

  7. 阶段3 2.Spring_01.Spring框架简介_02.今日课程内容介绍

    spring共四天 第一天:spring框架的概述以及spring中基于XML的IOC配置 第二天:spring中基于注解的IOC和ioc的案例 第三天:spring中的aop和基于XML以及注解的A ...

  8. 教师表(TEACHER.DBF)

    20-27题使用的数据如表1和表2所示. 表1 教师表(TEACHER.DBF) 教师号 姓名 性别 籍贯 职称 年龄 工资/元 0001 王吉兵 男 江苏 讲师 27 2003.50 0002 张晓 ...

  9. Spring容器启动源码分析

    1. 前言 最近搭建的工程都是基于SpringBoot,简化配置的感觉真爽.但有个以前的项目还是用SpringMvc写的,看到满满的配置xml文件,却有一种想去深入了解的冲动.折腾了好几天,决心去写这 ...

  10. C#学习笔记三（委托·lambda表达式和事件，字符串和正则表达式，集合，特殊的集合）

    委托和事件的区别 序号 区别 委托 事件 1 是否可以使用=来赋值 是 否 2 是否可以在类外部进行调用 是 否 3 是否是一个类型 是 否,事件修饰的是一个对象 public delegate vo ...