基于JS實(shí)現(xiàn)二維碼名片生成的示例代碼

第基于JS實(shí)現(xiàn)二維碼名片生成的示例代碼目錄演示技術(shù)棧源碼cssjs

演示

技術(shù)棧

這里用到了一個(gè)二維碼生成庫qrcode.js下面是簡單介紹:

//初始化QRCode對象

varqrcode=newQRCode(document.getElementById("qrcode"));

//也可以在初始化QRCode對象，傳入更多參數(shù)

varqrcode=newQRCode(document.getElementById("qrcode"),{

width:128,

height:128,

colorDark:"#000000",

colorLight:"#ffffff",

correctLevel:QRCode.CorrectLevel.H

//需要生成二維碼的字符串

qrcode.makeCode("");

//清除二維碼

qrcode.clear();

varqrcode=newQRCode("qrcode");

functionmakeCode(){

varelText=document.getElementById("text");

if(!elText.value){

alert("Inputatext");

elText.focus();

return;

qrcode.makeCode(elText.value);

makeCode();

$("#text").

on("blur",function(){

makeCode();

on("keydown",function(e){

if(e.keyCode==13){

makeCode();

源碼

css

*{/*通配符:選擇到所有的標(biāo)簽元素*/

margin:0;/*外邊距*/

padding:0;/*內(nèi)邊距*/

body{/*標(biāo)簽選擇器*/

background-image:linear-gradient(#1e045f,#032561,#183661);

background-position:centertop;/*背景定位:左右上下*/

.content{

width:950px;

margin:auto;

#wrap{/*#id選擇器*/

float:left;

width:480px;/*寬度*/

height:280px;/*高度*/

/*background:#933;*/

margin:100px;

#wrapp{/*混合選擇器*/

float:left;

width:200px;

height:40px;

border-radius:5px;/*圓角屬性*/

color:#fff;/*文字的顏色*/

margin:20px20px;

overflow:hidden;/*超出隱藏*/

text-align:center;

line-height:40px;

#wrappspan{/*行內(nèi)元素:設(shè)置寬高無效*/

/*display:block;塊元素占一行*/

float:left;

width:50px;

height:40px;

background:#333;

/*text-align:center;文本左右居中*

line-height:40px;/*行高*/

#wrappinput{

float:left;

width:150px;

height:40px;

border:0;

background:#000;

color:#fff;

outline:none;/*輪廓*/

text-indent:10px;/*首行縮進(jìn)*/

#qrcode{

float:left;/*左浮動(dòng):與父元素的左端對齊依次的往右端顯示*/

width:260px;

height:260px;

border:1pxsolidred;/*邊框線:寬度類型(實(shí)心)顏色*/

margin-top:110px;/*上外邊距100px*/

p#btn{/*選擇器選擇到越詳細(xì)優(yōu)先級(jí)越高*/

width:450px;

background:#6c0;

cursor:pointer;/*鼠標(biāo)手的形狀*/

js

varname='',company='',job='',adress='',moblie='',desc='';

//特效思維:什么元素觸發(fā)什么事件實(shí)現(xiàn)什么效果

$("#btn").click(function(){//點(diǎn)擊實(shí)現(xiàn)什么功能

//alert("注意點(diǎn)，你點(diǎn)到我了")

//獲取值

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";

varinfo="BEGIN:VCARD\n"+name+company+job+adress+moblie+desc+"END:VCARD";

//console.log(info);//在控制臺(tái)輸出