条形码生成EAN-13码（用JavaScript生成）

最新推荐文章于 2022-06-30 00:22:30 发布

小新新新新新_

最新推荐文章于 2022-06-30 00:22:30 发布

阅读量5k

点赞数 3

分类专栏：课程实验文章标签：条形码

本文链接：https://blog.csdn.net/qq_37945943/article/details/89101303

版权

课程实验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

条形码生成EAN-13码

这学期有门课专门讲条形码，然后实验就是生成一个EAN-13码并且识别，今天下午只先完成了生成，后面再补识别的。

1.EAN-13条码的符号结构

EAN-13条码由左侧空白区、起始符、左侧数据符、中间分隔符、右侧数据符、校验符、终止符、右侧空白区及供人识别字符组成。
这里用6901234567892为例
EAN-13条码的符号结构

左侧空白区
左侧空白区位于条码符号最左侧与空的反射率相同的区域，其最小宽度为11个模块宽。
起始符
起始符位于条码符号左侧空白区的右侧，表示信息开始的特殊符号，由3个模块组成。
左侧数据符
左侧数据符位于起始符右侧，表示6位数字信息的一组条码字符，由42个模块组成。
中间分隔符
中间分隔符位于左侧数据符的右侧，是平分条码字符的特殊符号，由5个模块组成。
右侧数据符
右侧数据符位于中间分隔符右侧，表示5位数字信息的一组条码字符，由35个模块组成。
校验符
校验符位于右侧数据符的右侧，表示校验符的条码字符，由7个模块。
终止符
终止符位于条码符号校验符的右侧，表示信息结束的特殊符号，由3个模块组成。
右侧空白区
右侧空白区位于条码符号最右侧的与空的反射率相同的区域，其最小宽度为7个模块宽。为保证右侧空白区的宽度，可在条码符号右下角加“>”符号，“>”符号的位置如图
供人识别字符
位于条码符号的下方，与条码相对应的13位数字。供人识别字符优先选用GB/T 12508中规定的OCR-B字符集；字符顶部和条码字符底部的最小距离为0.5个模块宽。

2.EAN-13条码的二进制表示

EAN/UPC条码字符集的二进制表示
EAN/UPC条码字符集包括A子集、B子集和C子集。每个条码字符由两个“条”和两个“空”构成。每个“条”或“空”由1~4个模块组成，每个条码字符的总模块数为7。用二进制“1”表示“条”的模块，用二进制“0”表示“空”的模块。条码字符集可以表示0-9共10个数字字符。EAN/UPC条码字符集的二进制表示如表

2. 起始符、终止符
起始符、终止符的二进制表示都为“101”

3. 中间分隔符
中间分隔符的二进制表示为“01010”
4. EAN-13条码的数据符及校验符
13代码中左侧的第一位数字为前置码。左侧数据符根据前置码的数值选用A、B子集，如表
左侧数据符EAN/UPC条码字符集的选用规则

3.校验码计算

首先，确定代码位置序号，代码位置序号是指包括校验码在内的，由右至左的顺序号。
计算过程

从代码位置序号2开始，所有偶数位的数字代码求和。
将步骤1的和乘以3。
从代码位置序号3开始，所有奇数位的数字代码求和。
将步骤2与步骤3的结果相加。
用10减去步骤4所得结果的个位数作为校验码（个位数为0，校验码为0）

这里以690123456789为例计算校验码

13	12	11	10	9	8	7	6	5	4	3	2	1
6	9	0	1	2	3	4	5	6	7	8	9	校验码

偶数位之和：9 + 1 + 3 + 5 + 7 + 9 = 34
奇数位之和：6 + 0 + 2 + 4 + 6 + 8 = 26
偶数位之和 * 3 + 奇数位之和：34 * 3 + 26 = 128
个位为8
校验码：10 - 8 = 2
所以最终条码代码为6901234567892
然后就是按照上面的规则画图，这里就直接附代码了
因为我其他语言比较菜o(╥﹏╥)o，相对来说用web的方式生成条码感觉比其他方式要简单一点，班里同学也有用java生成的，有感兴趣的也可以尝试一下，其实只要把编码规则弄懂就容易了。

4.代码实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="indexCSS.css">
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="produceJS.js" type="text/javascript"></script>
</head>
<body>
    <div id="body">
        <input id="input_box" placeholder="请输入条码号">
        <button id="produce_EAN" "produceCodeBar()">生成EAN13条形码</button>
    </div>
    <div id="code_bar">        
    </div>
    <div id="num_position">        
    </div>
</body>
</html>

produceJS.js（主要代码）

var numberPresent={
    0:{
        "A":"0001101",
        "B":"0100111",
        "C":"1110010"
    },
    1:{
        "A":"0011001",
        "B":"0110011",
        "C":"1100110"
    },
    2:{
        "A":"0010011",
        "B":"0011011",
        "C":"1101100"
    },
    3:{
        "A":"0111101",
        "B":"0100001",
        "C":"1000010"
    },
    4:{
        "A":"0100011",
        "B":"0011101",
        "C":"1011100"
    },
    5:{
        "A":"0110001",
        "B":"0111001",
        "C":"1001110"
    },
    6:{
        "A":"0101111",
        "B":"0000101",
        "C":"1010000"
    },
    7:{
        "A":"0111011",
        "B":"0010001",
        "C":"1000100"
    },
    8:{
        "A":"0110111",
        "B":"0001001",
        "C":"1001000"
    },
    9:{
        "A":"0001011",
        "B":"0010111",
        "C":"1110100"
    }
}

var version=[
    ["A","A","A","A","A","A"],
    ["A","A","B","A","B","B"],
    ["A","A","B","B","A","B"],
    ["A","A","B","B","B","A"],
    ["A","B","A","A","B","B"],
    ["A","B","B","A","A","B"],
    ["A","B","B","B","A","A"],
    ["A","B","A","B","A","B"],
    ["A","B","A","B","B","A"],
    ["A","B","B","A","B","A"]
];


function produceCodeBar () {
    var content = document.getElementById("input_box").value;
    console.log(content.length);
    if(content.length!==12){
        alert("请输入合法条码(12位，不包含校验码)");
    }
    else {
        var num=new Array();
        var even=0;
        var odd=0;
        for(var i=0;i<12;i++){
            num[11-i]=parseInt(content%10);
            content/=10;
            // 记录奇数位偶数位数字之和
            if(i%2==1){
                odd+=num[11-i]; //奇数位
            }
            else
                even+=num[11-i]; //偶数位
        }
        var check=even*3+odd;
        num[12]=10-check%10;
        console.log(num[12]);
        var temp = "<div><div class='bar_long color_1'></div><div class='bar_long color_0'></div><div class='bar_long color_1'></div>";
        for(var i=1;i<=6;i++){
            var ver = num[0];
            var choosen=version[ver][i-1];
            var numTemp = parseInt(numberPresent[num[i]][choosen]);
            for(var j=0;j<7;j++){
                if(parseInt(numTemp/Math.pow(10,6-j))===0){
                    temp+="<div class='bar color_0'></div>";
                }
                else{
                    temp+="<div class='bar color_1'></div>"
                }
                numTemp%=Math.pow(10,6-j);
            }
        }
        temp+=
            "<div class='bar_long color_0'></div><div class='bar_long color_1'></div>" +
            "<div class='bar_long color_0'></div><div class='bar_long color_1'></div>" +
            "<div class='bar_long color_0'></div>";
        for(var i=7;i<13;i++){
            var numTemp = parseInt(numberPresent[num[i]].C);
            for(var j=0;j<7;j++){
                if(parseInt(numTemp/Math.pow(10,6-j))===0){
                    temp+="<div class='bar color_0'></div>";
                }
                else{
                    temp+="<div class='bar color_1'></div>"
                }
                numTemp%=Math.pow(10,6-j);
            }
        }
        temp+=
            "<div class='bar_long color_1'></div><div class='bar_long color_0'></div>" +
            "<div class='bar_long color_1'></div><div class='clearfix'></div> ";
        $("#code_bar").html(temp);

        var temp="<div class='numNum start'>"+num[0]+"</div>";
        temp+=""
        for(var i=1;i<7;i++){
            temp+="<div class='numNum dataPart'>"+num[i]+"</div>";
        }
        temp+="<div class='numNum center'></div>";
        for(var i=7;i<13;i++){
            temp+="<div class='numNum dataPart'>"+num[i]+"</div>";
        }
        temp+="<div class='clearfix'></div>";
        $("#num_position").html(temp);
    }
}

indexCSS.css（生成条码的效果）

#body{
    margin-left: 50px;
}
#produce_EAN{
    border: none;
    background: #ff8f54;
    border-radius: 4px;
    width: 160px;
    text-align: center;
    padding: 2px 5px;
    cursor: pointer;
    color: #ffffff;
}
#code_bar{
    margin:50px;
    margin-bottom: 0;
}
.width_1{
    width: 5px;
}
.bar{
    width: 5px;
    height: 200px;
    float: left;
    margin: 0;
    padding: 0;
}
.bar_long{
    width: 5px;
    height: 220px;
    float: left;
}
.color_1{
    background: #000000;
}
.color_0{
    background: #ffffff;
}
.clearfix{
    clear: both;
}
#num_position{
    margin-left: 50px;
}

.numNum{
    float: left;
    /*margin:19px;*/
    font-size: 1rem;
}
.start{
    width: 30px;
    margin-left: -10px;
}
.dataPart{
    margin: 12px;
    margin-top: 0;
    /*margin-left: 20px;*/
    /*text-align: center;*/
    font-size: 1rem;
}
.dataPart:first-child{
    margin-left: 11px;
}
.center{
    width: 25px;
    margin-right: 4px;
    height: 20px;
}

最终效果就是这样
代码实现效果
用手机扫描结果是这样，不过因为是这个条码号扫出来结果是这个样子，改下条码号有些可以出现具体的码
手机扫描(结果)

小新新新新新_

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
条形码生成EAN-13码（用JavaScript生成）

条形码生成EAN-13码1.EAN-13条码的符号结构这学期有门课专门讲条形码，然后实验就是生成一个EAN-13码并且识别，今天下午只先完成了生成，后面再补识别的。1.EAN-13条码的符号结构EAN-13条码由左侧空白区、起始符、左侧数据符、中间分隔符、右侧数据符、校验符、终止符、右侧空白区及供人识别字符组成。这里用6901234567892为例左侧空白区左侧空白区位于条码符号...
复制链接

扫一扫

专栏目录