jQuery实现二维码扫描功能


Posted in Javascript onJanuary 09, 2017

二维码:利用图形模拟二进制0、1的概念,达到存储少量数据的功能,一般移动端浏览器解析出二维码里面隐藏的url数据会自动进行跳转,常见的支付宝、微信扫描登陆就是利用该原理

Jquery二维码的实现:jquery.qrcode.min.js插件

HTML正文:

<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

<input type="button" value="二维码" id="bt" />: <span id="count"></span>
<br>
<div id="code"></div>
<br>

Javascript操作代码:

var i=0;
$("#bt").click(function() {

 $("#count").text(++i);
 $("#code").text(""); //初始化二维码的位置

 jQuery('#code').qrcode({
  render : "canvas",//也可以替换为table
  width : 100,
  height : 100,
  text : "http://www.baidu.com" //二维码内置内容,如果时URL形式一般浏览器会自动加载
 });
});

效果:

jQuery实现二维码扫描功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 #Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 #Javascript
基于jQuery实现滚动刷新效果
Jan 09 #Javascript
用jQuery实现优酷首页轮播图
Jan 09 #Javascript
AngularJS实现表单验证功能
Jan 09 #Javascript
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
You might like
php正则校验用户名介绍
2008/07/19 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
javascript 特殊字符串
2009/02/25 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
iview实现图片上传功能
2020/06/29 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
python网络编程实例简析
2014/09/26 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python怎么调用自己的函数
2020/07/01 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
企业指导教师评语
2014/04/28 职场文书
实习生工作证明范本
2014/09/14 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书