基于JS實(shí)現(xiàn)二維碼名片生成的示例代碼
更新時(shí)間:2022年06月23日 11:50:55 作者:肥學(xué)
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)生成二維碼名片的功能,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以動(dòng)手嘗試一下
演示


技術(shù)棧
這里用到了一個(gè)二維碼生成庫(kù)qrcode.js下面是簡(jiǎn)單介紹:
//初始化QRCode對(duì)象
var qrcode = new QRCode(document.getElementById("qrcode"));
//也可以在初始化QRCode對(duì)象,傳入更多參數(shù)
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
*{/* 通配符: 選擇到所有的標(biāo)簽元素 */
margin:0;/*外邊距*/
padding:0;/*內(nèi)邊距*/
}
body{/* 標(biāo)簽選擇器 */
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{/*行內(nèi)元素 : 設(shè)置寬高無(wú)效*/
/*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;/*首行縮進(jìn)*/
}
#qrcode{
float:left;/*左浮動(dòng):與父元素的左端對(duì)齊 依次的往右端顯示*/
width:260px;
height:260px;
border:1px solid red;/*邊框線:寬度 類型(實(shí)心) 顏色*/
margin-top:110px;/*上外邊距100px*/
}
p#btn{/*選擇器選擇到越詳細(xì)優(yōu)先級(jí)越高*/
width:450px;
background:#6c0;
cursor:pointer;/*鼠標(biāo)手的形狀*/
}
js
var name='', 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";
var info ="BEGIN:VCARD\n" + name + company + job + adress + moblie + desc + "END:VCARD";
//console.log(info);//在控制臺(tái)輸出
//生成二維碼
var qrcode = new QRCode("qrcode");
qrcode.makeCode(info);
});以上就是基于JS實(shí)現(xiàn)二維碼名片生成的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于JS二維碼名片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
讓背景如此暗淡(一種彈出提示信息時(shí)頁(yè)面背景色調(diào)改變的方法)
讓背景如此暗淡(一種彈出提示信息時(shí)頁(yè)面背景色調(diào)改變的方法)...2006-10-10
Javascript Web Slider 焦點(diǎn)圖示例源碼
Slider 焦點(diǎn)圖會(huì)在很多的網(wǎng)站上見到,在本文為大家詳細(xì)介紹下具體的實(shí)現(xiàn)過(guò)程,下面的源碼大家可以運(yùn)行下2013-10-10
javascript dom追加內(nèi)容實(shí)現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的,在本文將為大家介紹下具體的使用方法,感興趣的朋友可以參考下2013-09-09
javascript使用location.search的示例
本文介紹javascript 使用location.search獲取當(dāng)前地址欄參數(shù)的實(shí)例2013-11-11
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語(yǔ)法,但它們?cè)谑褂脮r(shí)可能會(huì)引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時(shí)所遇到的坑和經(jīng)驗(yàn),需要的朋友可以參考下2023-08-08

