二维码(第二弹:使用jquery-qrcode方式实现二维码)
来源:互联网 发布:qq在线竞猜源码 编辑:程序博客网 时间:2024/05/16 04:51
这种方式是在前端实现二维码。
准备工作
首先我们需要下载相应的包,可以在如下地址下载:
https://github.com/jeromeetienne/jquery-qrcode
目前最新的就是1.0版本。
下载下来以后解压缩,我们要使用的是这个压缩包里面的jquery.qrcode.min.js文件,不过要注意,这个js依赖jquery,使用的时候要先引入jquery的js文件。
懒得去下载或者在github下载不下来的可以在我这里下载:http://download.csdn.net/detail/lianjiww/9720745。
实现步骤
这里我不使用jsp来做,直接使用html5来做。我使用的IDE是Webstorm。
首先我们引入jquery.js: <script type="text/javascript" src="js/jquery.min.js"></script>
然后引入jquery.qrcode.min.js: <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
然后我们创建一个DOM元素用来作为qrcode图片的容易,比如一个div: <div id="qrcode"></div>
最后用jquery代码把qrcode生成到这个容易中去,可以这样: jQuery('#qrcode').qrcode("www.baidu.com");
也可以同时设置宽和高:
jQuery('#qrcode').qrcode({ width: 64, height: 64, text: "www.baidu.com"});
最后运行这个页面,可以看到二维码就生成出来了。
完整示例代码
完整示例代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.qrcode.min.js"></script></head><body><div id="qrcode"></div><script type="text/javascript"> jQuery('#qrcode').qrcode({ width: 64, height: 64, text: "www.baidu.com" });</script></body></html>
1 0
- 二维码(第二弹:使用jquery-qrcode方式实现二维码)
- java实现二维码-使用jquery-qrcode方式生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery.qrcode生成二维码
- 使用jquery-qrcode生成二维码
- 使用jquery.qrcode生成二维码
- PHP的单文件上传类
- 反转链表
- Android 背后的XML设置
- 牛逼的Python书,你看过几本?
- OJ 1993: C语言实验——最值
- 二维码(第二弹:使用jquery-qrcode方式实现二维码)
- PHP的多文件上传类
- 读书笔记--Spring框架
- hdu 1059 Dividing(多重背包)
- Exception in thread "main" java.lang.SecurityException: Prohibited package name: java.io问题解决
- 再见,北京
- LINUX ACL 学习笔记
- 我的LabPHP框架的Demo应用——课程设计题目统计系统
- windows和linux上卸载mysql