blog banner

30 años más tarde, en javascript

Hoy se cumplen 30 añitos de la aparición del código de barras en España. Para celebrarlo voy a publicar una rutina javascript que creo que puede ser útil en algún caso. Pintar códigos de barras JS+CSS. El funcionamiento? sencillo. Simplemente una llamada a la función javascript codifica(código numérico, id codificación 1=EAN13/2=EAN8); —— JS ———————————————– function […]

Hoy se cumplen 30 añitos de la aparición del código de barras en España.
Para celebrarlo voy a publicar una rutina javascript que creo que puede ser útil en algún caso. Pintar códigos de barras JS+CSS.
El funcionamiento? sencillo. Simplemente una llamada a la función javascript codifica(código numérico, id codificación 1=EAN13/2=EAN8);

—— JS ———————————————–
function pintaCB(codif, codigoNum)
{
var HTMLresul=»<div class=»codigoBarras»>»;
var i=0;

while (codif[i])
{
switch(codif[i])
{
case «2»: HTMLresul=HTMLresul + («<div class=»inicio»>»);
break;
case «3»: HTMLresul=HTMLresul + («<div class=»medio»>»);
break;
case «4»: HTMLresul=HTMLresul + («<div class=»fin»>»);
break;
case «5»: HTMLresul=HTMLresul + («</div>»);
break;
default: break;

}
HTMLresul=HTMLresul + («<div class=»cb» + codif[i] + «»></div>»);
i++;
}
HTMLresul=HTMLresul + «<p class=»digitos»>» + codigoNum + «</p>»;
HTMLresul=HTMLresul + «</div>»;
document.write (HTMLresul);
}

function codifica(codigoNum, ean)
{
var EAN_izq1=new Array(‘0001101′,’0011001′,’0010011′,’0111101′,’0100011′,’0110001′,’0101111′,’0111011′,’0110111′,’0001011’);
var EAN_izq2=new Array(‘0100111′,’0110011′,’0011011′,’0100001′,’0011101′,’0111001′,’0000101′,’0010001′,’0001001′,’0010111’);
var EAN_der=new Array(‘1110010′,’1100110′,’1101100′,’1000010′,’1011100′,’1001110′,’1010000′,’1000100′,’1001000′,’1110100’);

var codif=new Array(‘11111′,’12122′,’12212′,’12221′,’21122′,’22112′,’22211′,’21212′,’21221′,’22121’);

if (ean==1) // codificación EAN13
{
var dib=»21015″;
//101 inicio. agregamos 2 como digito identificador y 5 al final, para poder representar por css como clase diferente
dib= dib + EAN_izq1[Number(codigoNum.charAt(1))]; //el digito 1 siempre codificacion 1
for(var i=2;i<7;i++)
{
if (codif[Number(codigoNum.charAt(0))].charAt(i-1)==2)
{

dib= dib + EAN_izq1[Number(codigoNum.charAt(i))];}
else
{
dib= dib + EAN_izq2[Number(codigoNum.charAt(i))];}
}
dib=dib + «3010105»;
//01010 central. agregamos 3 como digito identificador y 5 al final, para poder representar por css como clase diferente
for(var i=7;i<13;i++){dib = dib + EAN_der[Number(codigoNum.charAt(i))];}
dib = dib + «41015»; //fin
}
else //EAN8
{
var dib=»21015″; //inicio
for(var i=0;i<4;i++){dib= dib + EAN_izq1[Number(codigoNum.charAt(i))];}
dib=dib + «3010105»; //centro
for(var i=4;i<8;i++){dib = dib + EAN_der[Number(codigoNum.charAt(i))];}
dib = dib + «41015»; //fin
}
pintaCB(dib,codigoNum);
}

——— CSS ——————————————————————————
.codigoBarras{position: relative; display: block; float: left; width: 200px; height: 100px; border: 1px solid #000; margin: 0; padding: 0;}

.cb0, .cb1{float: left; width: 1px; border: none; height: 80px; padding: 0; margin:0;}

.cb1{background-color: #000;}
.cb0{background-color: #fff;}

.inicio, .medio, .fin{margin:0; padding:0; float: left; position: relative;}
.inicio{margin: 0 0 0 5px;}

.inicio .cb1,
.inicio .cb0,
.medio .cb1,
.medio .cb0,
.fin .cb1,
.fin .cb0
{height: 90px;}

.codigoBarras .digitos{display: block; position: absolute; left: 0; top: 80px; clear: both; margin:0; padding:0;}
——————————————————————————————

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *