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

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

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

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

1. 左侧空白区
   左侧空白区位于条码符号最左侧与空的反射率相同的区域，其最小宽度为11个模块宽。

2. 起始符
   起始符位于条码符号左侧空白区的右侧，表示信息开始的特殊符号，由3个模块组成。

3. 左侧数据符
   左侧数据符位于起始符右侧，表示6位数字信息的一组条码字符，由42个模块组成。

4. 中间分隔符
   中间分隔符位于左侧数据符的右侧，是平分条码字符的特殊符号，由5个模块组成。

5. 右侧数据符
   右侧数据符位于中间分隔符右侧，表示5位数字信息的一组条码字符，由35个模块组成。

6. 校验符
   校验符位于右侧数据符的右侧，表示校验符的条码字符，由7个模块。

7. 终止符
   终止符位于条码符号校验符的右侧，表示信息结束的特殊符号，由3个模块组成。

8. 右侧空白区
   右侧空白区位于条码符号最右侧的与空的反射率相同的区域，其最小宽度为7个模块宽。为保证右侧空白区的宽度，可在条码符号右下角加“>”符号，“>”符号的位置如图
   

9. 供人识别字符
   位于条码符号的下方，与条码相对应的13位数字。供人识别字符优先选用GB/T 12508中规定的OCR-B字符集；字符顶部和条码字符底部的最小距离为0.5个模块宽。

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

1. 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子集，如表

3.校验码计算

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

1. 从代码位置序号2开始，所有偶数位的数字代码求和。
2. 将步骤1的和乘以3。
3. 从代码位置序号3开始，所有奇数位的数字代码求和。
4. 将步骤2与步骤3的结果相加。
5. 用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

    
    
    
    
    


    

        
        生成EAN13条形码
    
    
        
    
    
        
    

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 = "
";
        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+="
";
                }
                else{
                    temp+="
"
                }
                numTemp%=Math.pow(10,6-j);
            }
        }
        temp+=
            "
" +
            "
" +
            "
";
        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+="
";
                }
                else{
                    temp+="
"
                }
                numTemp%=Math.pow(10,6-j);
            }
        }
        temp+=
            "
" +
            "
 ";
        $("#code_bar").html(temp);

        var temp="
"+num[0]+"
";
        temp+=""
        for(var i=1;i<7;i++){
            temp+="
"+num[i]+"
";
        }
        temp+="
";
        for(var i=7;i<13;i++){
            temp+="
"+num[i]+"
";
        }
        temp+="
";
        $("#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;
}

最终效果就是这样

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