基于JS实现二维码名片生成的示例代码

目录
  • 演示
  • 技术栈
  • 源码
    • css
    • js

演示

技术栈

这里用到了一个二维码生成库qrcode.js下面是简单介绍:

//初始化QRCode对象
var qrcode = new QRCode(document.getElementById("qrcode"));
//也可以在初始化QRCode对象,传入更多参数
var qrcode = new QRCode(document.getElementById("qrcode"),{
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
//需要生成二维码的字符串
qrcode.makeCode("http://www.leixuesong.cn");
//清除二维码
qrcode.clear();
var qrcode = new QRCode("qrcode");

function makeCode () {
    var elText = document.getElementById("text");

    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }

    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
on("blur", function () {
    makeCode();
}).
on("keydown", function (e) {
    if (e.keyCode == 13) {
        makeCode();
    }
});

源码

css

*{/* 通配符: 选择到所有的标签元素 */
				margin:0;/*外边距*/
				padding:0;/*内边距*/
			}
			body{/* 标签选择器 */
				background-image: linear-gradient(#1e045f, #032561, #183661);
				background-position:center top;/*背景定位:左右 上下*/
			}
			.content{
				width:950px;
				margin:auto;
			}
			#wrap{/* # id选择器*/
				float:left;
				width:480px;/* 宽度 */
				height:280px;/* 高度 */
				/*background:#933;*/
				margin:100px;

			}
			#wrap p{/*混合选择器*/
				float:left;
				width:200px;
				height:40px;
				border-radius:5px;/*圆角属性*/
				color:#fff;/*文字的颜色*/
				margin:20px 20px;
				overflow:hidden;/*超出隐藏*/
				text-align:center;
				line-height:40px;
			}
			#wrap p span{/*行内元素 : 设置宽高无效*/
				/*display:block;块元素占一行*/
				float:left;
				width:50px;
				height:40px;
				background:#333;
				/*text-align:center;文本左右居中*
				line-height:40px;/*行高*/

			}
			#wrap p input{
				float:left;
				width:150px;
				height:40px;
				border:0;
				background:#000;
				color:#fff;
				outline:none;/*轮廓*/
				text-indent:10px;/*首行缩进*/
			}
			#qrcode{
				float:left;/*左浮动:与父元素的左端对齐 依次的往右端显示*/
				width:260px;
				height:260px;
				border:1px solid red;/*边框线:宽度 类型(实心) 颜色*/
				margin-top:110px;/*上外边距100px*/
			}
			p#btn{/*选择器选择到越详细优先级越高*/
				width:450px;
				background:#6c0;
				cursor:pointer;/*鼠标手的形状*/
			}

js

var name='', company='',job='',adress='',moblie='',desc='';
			//特效思维:什么元素 触发 什么事件 实现 什么效果
			$("#btn").click(function(){//点击实现什么功能
				//alert("注意点,你点到我了")
				//获取值
				name = "FN:" + $("#name").val() + "\n";//获取值
				company = "ORG:" + $("#company").val() + "\n";
				job = "TITLE:" + $("#job").val() + "\n";
				adress = "WORK:" + $("#adress").val() + "\n";
				moblie = "TEL:" + $("#moblie").val() + "\n";
				desc = "NOTE:" + $("#desc").val() + "\n";
				var info ="BEGIN:VCARD\n" + name + company + job + adress + moblie + desc + "END:VCARD";
				//console.log(info);//在控制台输出
				//生成二维码
				var qrcode = new QRCode("qrcode");
				qrcode.makeCode(info);
			});

以上就是基于JS实现二维码名片生成的示例代码的详细内容,更多关于JS二维码名片的资料请关注我们其它相关文章!

时间: 2022-06-22

JS生成和下载二维码的代码

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

如何基于原生javaScript生成带图片的二维码

这篇文章主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用链接生成二维码主要是使用qr.js或者其他,把链接转化为二维码的形式,在使用canvas时需要设置画布的尺寸,生成的颜色. <div class="qr_code"> <img src="" id="imgcode" /> <canvas ref=

JS实现将链接生成二维码并转为图片的方法

本文实例讲述了JS实现将链接生成二维码并转为图片的方法.分享给大家供大家参考,具体如下: <div id="code"></div> <img id="img"/> <script type="text/javascript"> var qrcode=$("#code").qrcode({ render:'canvas||table', width: 200, //宽度 heig

js生成二维码的示例代码

前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File

JavaScript动态生成二维码图片

1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

基于JavaScript实现生成名片、链接等二维码

废话不多说,直接贴代码了,具体内容如下: <div id = "qrcodeid"></div> //生成的二维码放在此 div 中 <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>//引入qrcode.js(到https://github.com/jeromeetienne/jquery-qrcode 下载

Javascript生成带参数的二维码示例

前言 在最近的项目中有个需求是要生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实,下面话不多说,直接上实现的过程. 引入js: require.config({ baseUrl : "/", paths: { jquery:'plugin/jquery/jquery-3.1.0.min', qrcode:'plugin/qrcode/qrcode' } }); require( [ 'jquery', 'qrcode'

基于SignalR的消息推送与二维码扫描登录实现代码

1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于SinglarR消息推送机制的扫描登录.本系统涉及到以下知识点: SignalR:http://signalr.net/ 这官网,ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的

Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例

本文实例讲述了Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能.分享给大家供大家参考,具体如下: /** * 利用phpqrcode来实现生成带有logo的二维码图片 */ public function getQrCode(Request $request){ $type = $request->input('type');//传递的类型 ios | android require_once(dirname(__FILE__) . '/phpqrcode/' . 'ph

微信接口生成带参数的二维码

为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 用户扫描带场景值二维码时,可能推送以下两种事件: (1)如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事件推送给开发者. (2)如果用户已经关注公众号,在用户扫描后会自动进入会话,微信也会将带场景值扫描事件推送给开发者. 获取带参数的二维码的过程包括两步:(I)首先创建二维码ticket:(II)然后凭借ticket到

微信 开发生成带参数的二维码的实例

微信开发生成带参数的二维码的讲解 在微信公众号平台开发者那里,在"账号管理"那里,有一项功能是"生成带参数的二维码",通过这儿生成的二维码,只要通过微信扫一扫之后,会把事件自动推送到微信公众号上 用微信扫一扫推送到开发者网址那儿的数据如下: <xml><ToUserName><![CDATA[gh_452****b0f2]]></ToUserName> <FromUserName><![CDATA[o

C#生成带logo的二维码

带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类   QRCodeHelper.cs  ,直接调用  CreateQRCodeWithLogo 方法,传入相应参数返回bitmap类型的数据,直接将返回的数据绑定到图片控件,如果是web可以先将图片保存到服务器指定地址在获取显示 /// <summary> /// 生成带logo二维码 /// </summa

Thinkphp3.2.3整合phpqrcode生成带logo的二维码

Thinkphp中没有二维码相关的库,因此我们可以通过整合phpqrcode来完成生成二维码的功能. 下载phpqrcode 下载地址:http://phpqrcode.sourceforge.net/ 整合到Thinkphp框架 在"ThinkPHP\Library\Vendor\"下新建目录phpqrcode,将压缩包内容解压到该文件夹下. 调用phpqrcode生成二维码 在IndexController控制器下添加如下方法: public function qrcode($ur

Python3批量生成带logo的二维码方法

最近有个需求:批量生成带Logo的二维码 生成二维码比较简单,网上的资源也比较多,不赘述了.自己研究了一下加了logo并且美化了一下(网上的资源直接加Logo特别丑!!!忍不了!!!),直接上代码: def create_qrcode(url, filename): qr = qrcode.QRCode( version=1, #设置容错率为最高 error_correction=qrcode.ERROR_CORRECT_H, box_size=10, border=4, ) qr.add_da

Java生成中间logo的二维码的示例代码

最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司的logo是不是好一点?加上吧, 加上公司logo之后,产品经理想了想,每个商品都有个二维码,销售人员有很多个商品二维码,群发给用户,在qq群上,微信群上,怎么知道哪个二维码对应哪个商品的呢?于是决定要加上商品名称.最后商品二维码就成了下面这个模样了(当然啦,这里面的logo并不是博主现职公司的).