基于JS怎么实现二维码名片生成

这篇文章主要介绍“基于JS怎么实现二维码名片生成”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于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{float:left;width:480px;height:280px;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{float:left;width:50px;height:40px;background:#333;}#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;}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怎么实现二维码名片生成”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。