您的位置:68399皇家赌场 > 服务器租用 > Q昂CoraCode.js:使用 JavaScript 生成2维码

Q昂CoraCode.js:使用 JavaScript 生成2维码

发布时间:2019-05-08 19:29编辑:服务器租用浏览(55)

    什么是 QRCode.js?

    Q凯雷德Code.js 是三个用以生成二维码的 JavaScript 库。首要是经过获得 DOM 的标签,再经过 HTML5 Canvas 绘制而成,不借助任何库。


    Q冠道Code.js是2个贯彻生成二维码(Q猎豹CS6Code)的js插件。 Q中华VCode.js有着突出的跨浏览器包容性(高版本使用HTML五的 Canvas,低版本IE使用table成分绘制),而且Q汉兰达Code.js未有其余借助。只须要引用1个QRAV4Code.js。

    jquery.qrcode.js 是五个力所能致在客户端生成矩阵二维码QOdysseyCode 的jquery插件 ,使用它能够很有益于的在页面上生成二维条码。

    什么是 QRCode.js?

    Q锐界Code.js 是1个用于生成2维码的 JavaScript 库。首即便由此获得 DOM 的价签,再通过 HTML伍 Canvas 绘制而成,不重视任何库。

    中央用法

    载入 JavaScript 文件

    <script type="text/javascript" src="http://www.nuyizu.com/uploads/allimg/190508/192944J64-0.jpg"></script>
    

     DOM结构

    <div id="qrcode"></div>
    

    JavaScropt调用

    www.68399.com 1www.68399.com 2

    //简单形式
    new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接
    
    // 设置参数方式
    var qrcode = new QRCode("test", {
        text: "http://www.runoob.com",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    
    // 使用 API
    qrcode.clear();
    qrcode.makeCode('new content');
    

    View Code

    主导用法

    <div id="qrcode"></div>
    <script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 设置要生成二维码的链接
    </script>
    

    依然利用部分可选参数设置:

    var qrcode = new QRCode("test", {
        text: "http://www.runoob.com",
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    

    www.68399.com,无差别于我们能够应用以下办法:

    qrcode.clear(); // 清除代码
    qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
    

    1、引入qrcode.js

    QRCode.js

    参数表明

    new QRCode(element, option)
    
    名称 默认值 说明
    element - 显示二维码的元素或该元素的 ID
    option   参数配置

    option 参数表明

    名称 默认值 说明
    width 256 图像宽度
    height 256 图像高度
    colorDark "#000000" 前景色
    colorLight "#ffffff" 背景色
    correctLevel QRCode.CorrectLevel.L 容错级别,可设置为:

    QRCode.CorrectLevel.L

    QRCode.CorrectLevel.M

    QRCode.CorrectLevel.Q

    QRCode.CorrectLevel.H

    API 接口

    名称 说明
    makeCode(text) 设置二维码内容
    clear() 清除二维码。(仅在不支持 Canvas 的浏览器下有效)

    浏览器支持

    支撑该库的浏览器有:IE陆~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。


    示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no,email=no" name="format-detection">
        <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
        <title>二维码</title>
    </head>
    <body>
        <div class="wrapper">
            <textarea id="txtContent" cols="50" rows="5"></textarea>
            <button type="button" onclick="getCode();">生成</button>
            <div id="qrCode"></div>
            <script type="text/javascript" src="http://www.nuyizu.com/uploads/allimg/190508/1929441429-3.jpg"></script>
            <script type="text/javascript" src="http://www.nuyizu.com/uploads/allimg/190508/192944J64-0.jpg"></script>
            <script type="text/javascript">
             var qrCode = document.getElementById("qrCode");
             var txtContent = document.getElementById("txtContent");
             var qrcode=new QRCode(qrCode,{
                width:300,
                height:300,
                correctLevel:QRCode.CorrectLevel.L
            });
    
             function getCode() {
                qrcode.makeCode(txtContent.value);
            }  
        </script>
    </body>
    </html>
    

    结果:

    www.68399.com 3

     

    <script src="qrcode.js" type="text/javascript"></script>
    

    Q昂CoraCode.js是javascript完毕2维码(QGL450Code)制作生成库。 Q奥德赛Code.js有着多姿多彩的跨浏览器兼容性(高版本使用HTML伍的 Canvas,低版本IE使用table成分绘制),而且Q路虎极光Code.js未有别的借助。只需求引用一个JS。

    浏览器援救

    帮衬该库的浏览器有:IE六~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

    2、HTML代码

    此插件是力所能致独立行使的,体量也比较小,使用gzip压缩后才不到四kb。因为它是一向在客户端生成的条形码,所以不会有图片下载的进度,能够实现迅快速生成成。它是依据一个多语言的类库封装的,也不依据于其余额外的劳务。

    实例代码

    HTML 代码

    www.68399.com 4www.68399.com 5

    <input id="text" type="text" value="http://www.runoob.com" /><br />
    <div id="qrcode"></div>
    

    View Code

    CSS 代码

    www.68399.com 6www.68399.com 7

    #qrcode {
    width:160px;
      height:160px;
      margin-top:15px;
    }
    

    View Code

    JavaScript 代码

    www.68399.com 8www.68399.com 9

    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();
        }
    });
    

    View Code

     HTML完整代码

    www.68399.com 10www.68399.com 11

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
    <title>Javascript 二维码生成库:QRCode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="http://www.nuyizu.com/uploads/allimg/190508/1929441429-3.jpg"></script>
    <script type="text/javascript" src="http://www.nuyizu.com/uploads/allimg/190508/192944J64-0.jpg"></script>
    </head>
    <body>
    <input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
    
    <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
    width : 100,
    height : 100
    });
    
    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();
    }
    });
    </script>
    </body>
    </html>
    

    View Code

    <div id="qrcode"></div>
    

    注* 它也支撑接纳SVG绘制2维码

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:Q昂CoraCode.js:使用 JavaScript 生成2维码

    关键词: 68399皇家赌场

上一篇:数组

下一篇:没有了