溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS二維碼生成插件,一鍵生成二維碼

發(fā)布時(shí)間:2020-03-01 05:09:48 來源:網(wǎng)絡(luò) 閱讀:285 作者:Gendan5 欄目:開發(fā)技術(shù)

jquery.qrcode是個(gè)依賴jquery的二維碼生成插件,主要用于連接和文本的二維碼生成,有兩種生成格式canvas和table格式的,當(dāng)然canvas不支持低版本瀏覽器,table有點(diǎn)小bug,但是沒啥大問題。建議使用在移動(dòng)端上。

這兒插件可以擴(kuò)展開發(fā),本來也是MIT協(xié)議的東西,后期我有可能會(huì)加點(diǎn)其他的功能,目前考慮的是加logo了,其他的再說。

這個(gè)js插件可以點(diǎn)擊生成,列表生成都是可以的,寫的方法跟JQ是一樣的,不懂得可以留言。

【github地址:https://github.com/jeromeetienne/jquery-qrcode】代碼可以去github下載,可以到文章的最下面使用百度網(wǎng)盤,我會(huì)提供的。

這次我就簡單的給大家介紹一下jquery-qrcode的使用方法。(www.gendan5.com)

<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<div class="qrcode1"></div>
<div class="qrcode2"></div>
<div class="qrcode3"></div>
<script type="text/javascript">
$(document).ready(function () {
//一、如果是英文字符
$('.qrcode1').qrcode({
render: "canvas", //兩種模式1、table 2、canvas
correctLevel: 1,//識(shí)別度
quiet:20,
width: 200,//寬度
height: 200,//高度
foreground: "#333",//紋路色
background: "#eee",//背景色
text: "http://cenggel.com",//文字
});

    //二、鏈接帶中文的時(shí)候需要使用encodeURI進(jìn)行轉(zhuǎn)碼才可以
    $('.qrcode2').qrcode({
        render: "canvas", //兩種模式1、table  2、canvas
        correctLevel: 1,//識(shí)別度
        width: 200,//寬度
        height: 200,//高度
        foreground: "#333",//紋路色
        background: "#eee",//背景色
        text: (encodeURI("http://cenggel.com/tag/chrome插件"))//文字
    });
    //三、文字中包含中文+英文字符的時(shí)候
    var str = "CGLweb前端 cenggel.com";
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        }
    }
    //轉(zhuǎn)換代碼來自于網(wǎng)絡(luò),出處實(shí)在是不好說,如果知道出處請?zhí)峁┮幌骆溄?,謝謝
    $('.qrcode3').qrcode({
        render: "canvas", //兩種模式1、table  2、canvas
        correctLevel: 3,//識(shí)別度
        width: 200,//寬度
        height: 200,//高度
        foreground: "#333",//紋路色
        background: "#eee",//背景色
        text:out   //文字
    });
});

</script>
<style type="text/css">
body{ width:1200px; margin:0 auto;}
div{ margin:100px; width:200px; float:left;}
</style>

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

js j
AI