专栏首页农历七月廿一JavaScript实现在线生成二维码

JavaScript实现在线生成二维码

普及一下二维码是什么:

二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。

这是二维码的基本结构

当然看了这些我不是要做这个,而是用在线的接口实现,哈哈

效果预览:

我们简单的做一个这个!

CSS:

hr{width: 35%;}
button{background-color: #009F95;border-color: #009F95;margin-left: 8%;font: "微软雅黑";font-size: 1.5rem;}
button:hover{background-color: #C12E2A;border-color: #C12E2A;}
.boderdiv{margin-left:40%;width: 50rem;height: 50rem;}

H5:

<div class="boderdiv">
			<label>二维码生成器</label><br /><hr/>
			请输入内容:<input type="text" name="" id="name" value=""/><br /><br />
			请选择背景颜色:<input type="color" name="color" id="bgcolor"><br /><br />
			请选择前景颜色:<input type="color" name="color" id="fgcolor"><br /><br />
			请选择渐变颜色:<input type="color" name="color" id="gccolor"><br /><br />
			<hr />
			<button type="button" id="" value="" οnclick="_Qrcode()"/>点击生成</button><br /><br />
				<div id="code">
				</div>
		</div>

JS:

function _Qrcode(){
			/*将之前生成的二维码清空*/
			var mainObj = $('#code');
                mainObj.empty();
			/*取到用户的的数据*/
			var name = $("#name").val();
			var _bgcolor = $("#bgcolor").val().split("#");
			var _fgcolor = $("#fgcolor").val().split("#");
			var _gccolor = $("#gccolor").val().split("#");
			console.log(_bgcolor[1]);
			/*将用户数据放入链接种,然后img填充到div*/
			var _img = '<img src="http://qr.liantu.com/api.php?bg='+_bgcolor[1]+'&fg='+_fgcolor[1]+'&gc='+_gccolor[1]+'&text='+name+'"/>';
			$("#code").append(_img);
		}

我做的是比较简陋的,没有做美化,你们可以扩展的比较多,自己美化一下就行了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery怎么给循环出来的列表(类似于text框)取值和赋值

    场景描述:这样的我在项目的时候遇到了一个很常见的问题,但是一直没有解决,最后在朋友的帮助下解决了,所以简单的将这个代码和解决的过程描述一下,给以后你们遇到类...

    何处锦绣不灰堆
  • 几种常见的获取页面元素数据的方法

    页面之所以是动态的,其实不仅仅是因为他是具有js的动态效果的,还有一部分是因为他的数据是动态的,所以页面才会显得很有活性,但是很多的时候获取数据是一个很恶心的事...

    何处锦绣不灰堆
  • 小程序开发之路-开篇

    要问目前什么比较火,小程序一定是在席的,小程序的火爆程序已经持续了很长一段时间了,他的薪资也不低,所以很多人跃跃欲试,那么究竟怎么开发,我一直也在琢磨,但是奈何...

    何处锦绣不灰堆
  • MyBatis魔法堂:Insert操作详解(返回主键、批量插入)

    一、前言                                      数据库操作怎能少了INSERT操作呢?下面记录MyBatis关于INSERT...

    ^_^肥仔John
  • Spring事务管理

    Spring事务管理分为声明式事务管理和编程式事务管理,声明式事务管理又分为xml和注解两种配置方式。应该优先选择声明式事务,因为声明式事务对程序代码的影响最小...

    布禾
  • 聊聊iOS中的 MVC、MVP、MVVM以及 VIPER等代码组织方式

    但是现实中我们的View依然跟Model耦合,因为如果完全按照这个理想化的MVC的话,View(cell)层的设置都应该在 Controller中,这样的话,C...

    進无尽
  • 从Web开发的角度聊聊MVC、MVP和MVVM

    M、V 是这三种架构模式中的共同含有的部分,M 是 Model 的缩写,代表“数据模型”;V 是 View 的缩写,代表“视图”。

    心谭博客
  • 根据实例说数据库设计(一)—— 人员管理

         说在前面      可能您会问,树的系列还差第三篇没有写呢,怎么就又说数据库设计了?因为如果写第三篇的话,那么就涉及到了权限,而权限里面又涉及到了人员...

    用户1174620
  • Javascript:模仿淘宝的信用评价

    老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝。 于是今天研究了一下,用jQuery模似一个类似的效果:  ? 代码如下: <!D...

    菩提树下的杨过
  • 图像转换3D模型只需5行代码,英伟达推出3D深度学习工具Kaolin

    此外,Kaolin 库还可以大大降低为深度学习准备 3D 模型的工作量,代码可由 300 行锐减到仅仅 5 行。

    机器之心

扫码关注云+社区

领取腾讯云代金券