生成二维码需要引入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. 第九周学习总结&实验报告（7）

    完成火车站售票程序的模拟. 要求: (1)总票数1000张; (2)10个窗口同时开始卖票; (3) 卖票过程延时1秒钟; (4)不能出现一票多卖或卖出负数号票的情 况 实验代码: package y ...

  2. nodejs 配置服务器

    node 是 js 的运行的后台环境,他自身集成了很多模块,集成的模块直接 require 就行了: npm 第三方平台,他也是为 node 服务的,对于 npm 中的模块,先 npm install ...

  3. 使用Jmeter性能测试注意点

    一.性能测试注意点 1. 用jmeter测试时使用BeanShell脚本获取随机参数值,会导致请求时间过长,TPS过低.应改为使用csv读取参数值,记录的TPS会更加准确. 注:进行性能测试时,应注意 ...

  4. P1070道路游戏题解

    日常吐槽 作为hin久hin久以前考试考到过的一道题窝一直咕咕咕到现在才想起来去做因为讲解都忘干净了然后自己重新考虑发现被卡了3天 题面 看到题目发现这题的dp状态似乎有点不是很明确? 我们来理一理题 ...

  5. Netem参数说明

    Netem参数说明 本文主要内容来自Linux基金会Wiki网站Netem文档,点击这里访问原文 netem通过模拟广域网的特性为测试协议提供网络仿真功能.当前版本模拟可变延迟,丢失,重复和重新排序. ...

  6. 如何保存 Activity 的状态？

    Activity 的状态通常情况下系统会自动保存的,只有当我们需要保存额外的数据时才需要使用到这样的功能.一般来说, 调用 onPause()和 onStop()方法后的 activity 实例仍然存 ...

  7. CICD - 持续集成与持续交付

    持续集成与持续交付是软件开发和交付中的实践.我们项目中一直在践行持续集成(CI:Continuous Integration):持续交付(CD:Continuous Delivery)未能达到理想状态 ...

  8. dcef3 基本使用经验总结

    dcef3 基本使用经验总结 https://www.cnblogs.com/h2285409/p/10517483.html 加载命令启动参数    --enable-system-flash 会加 ...

  9. Kibana 5.5.2 安装包下载 （各种历史版本下载）

    背景说明 最近项目中在使用 5.5.2 版本的  Elasticsearch 作为数据库,使用的是以前的老版本. 用到 Elasticsearch ,难免要和其相关基本操作命令打交道.选择一款顺手的工 ...

  10. Oracle 笔记（一）

    Oracle基本理论 l  主流数据库 微软公司:SQL Server  ACCESS IBM公司:DB2  infomix Oracle公司:Oracle  MySQL(AB公司) 小型数据库 AC ...