Teach you step by step how to create super cool barcode effects

Statement:
1. This article teaches you how to implement barcode effects on web pages, embodying the idea of ​​using web page production technology to comprehensively solve problems. It is designed to consolidate entry-level skills for people with entry-level proficiency in HTML, JavaScript, and PhotoShop.
2. If you have any questions and cannot reply in time, please forgive me for the trouble. Thank you very much.
3. Experts are exempt from entry.

How many steps are there in making a barcode?
The first step is to open the refrigerator door - use PhotoShop to draw a small picture

We need to create a barcode image containing 16 elements.

First open Photoshop. The CS Simplified Chinese version is used in this tutorial. As far as this tutorial is concerned, the operations are similar. As long as you read it carefully, you should not encounter any problems.

• After opening, first press Ctrl N to create an 8 pixels
  
  

In order to see clearly, you can zoom the picture to the maximum 1600%.

• 
  

Click D and then X. Make sure the foreground color is white and the background color is black.

• 
  

Use Ctrl Delele to fill the background color with black.

• 
  

Use the pencil pen tool and set the parameters as follows

• 
  
  

Create lines, every other column Draw one. Draw the following effect:

• 
  
  

Drag layer 1 to the new button below and copy it

• 
  
  

Select the copy of layer 1 and paint the first white line on the left black with the pencil tool (you can press X to change the foreground color to black). As shown in the figure below:

• 
  
  

Select layer 1, press Ctrl A, then Ctrl C, then select the menu command Image = Canvas Size, and change Adjust the width to 16 pixels and click on the leftmost middle patch positioned as shown below:

• 
  
  

Select the Layer 1 copy. Hold down the Ctrl key and left-click the Layer 1 Copy entry on the Layers panel to select a selection of Layer 1 Copy. Press Ctrl Shift I to invert the selection (this series can also be operated with the magic wand, just select the transparent part). Press Ctrl V to paste into layer 2.

• 
  

Turn off the visibility of layer 1 and the copy of layer 1 (left-click the little eye icon), select layer 2, and use the pencil tool to paint the second white line on the left Painted black. As shown below:

• 
  
  

Turn on the visibility of the copy of layer 1, make sure layer 2 is selected, and press Ctrl E to merge down.

• 
  

Turn on the visibility of Layer 1, hold down the Ctrl key, and left-click the Layer 1 entry on the Layers panel to select a selection of Layer 1. Duplicate and expand the canvas and continue painting as described previously. Do it twice more when the width is 24 and 32, and paint the third and fourth white stripes of the layer 1 pattern (pattern) black respectively. The final result is shown in the figure below:

• 
  
  

Next, it needs to be widened. The method is the same, but this time the mode transformation plan is Paint the black between two adjacent whites with white. For example, the fifth expansion, the pattern is like this:

• 
  
  

After doing it a few more times, when the width is 64, the canvas should look like It looks like this:

• 
  
  

Next, it still needs to be widened. The idea is to delete the two adjacent white bars (note that the fourth white bar can be considered adjacent to the first white bar), so the effect of doing it 4 more times is like this:

• 
  
  

It’s done with 32 pixels left. Now, it needs to be widened again. This time, two adjacent black bars are filled with white bars. The final effect is as follows:

• 
  
  

Layer 1 OK No more, just delete it.

• Next we need to remove the black part to make it transparent. Use the magic wand tool to set the options as follows:
  
  After selecting, press the delete key to delete, and the entire canvas will become as follows:
  
  It seems messy, it’s PS Regarding the problem of expressing with a transparent background, just make sure that the steps are correct to achieve this effect.
  

• You’re done. Select the file - Save as, select the type as gif, you can name it barcode.gif. In the dialog box below, the transparent option must be selected. Find a suitable place to put it.
  
  

• Then the refrigerator door opened. If you don’t make it like this, just use the one I made, so as not to prevent the elephant from pretending. Go in.

The second step is to put the elephant in - code analysis
Our goal is to put a character The string is converted into a barcode and displayed on the page. So how does a string correspond to a barcode? What is the point of making a 128X8 picture above?

We can consider the most basic storage unit of data in memory - byte. A byte is eight bits. An 8-bit binary number can be represented by a 2-digit hexadecimal number, represented as 00 - FF. I just mentioned a 16, did you notice it?

How to convert a string into byte representation? It seems that it cannot be expressed directly, but strings in J(ava)script have a charCodeAt() method. We know that if a single byte represents an integer, its range is 0 -255, and if a double byte represents a positive integer, the range is 0 - 65535. The charCodeAt() method returns the Unicode representation of a character. In this Unicode scheme, Chinese is two bytes and English is one byte. So for an English character it always returns a positive integer between 0 - 255, and for a Chinese character it always returns a positive integer between 255 - 65535 (not an exact range).

Let’s talk about bit operations again, excerpted from Microsoft’s Jscript Script Reference Manual:

For AND operations. The & operator looks at the binary representation of the values ​​of two expressions and performs a bitwise AND operation. The result of this operation is as follows:

• 0101 (expression1)
  1100 (expression2)
  ----
  0100 (result)
  At any time, as long as there are two expressions A certain bit of is all 1, then the bit of the result is 1. Otherwise, this bit of the result is 0.
  
  
  

For shift operations, such as right shift operations. expression1 >> In expression2, the >> operator shifts all bits of expression1 to the right by the number of bits specified by expression2. The sign bit of expression1 is used to fill the left vacated bits after the right shift. Bits shifted out to the right are discarded. For example, when the following code is evaluated, the value of temp is -4: -14 (which is 11110010 in binary) shifted two places to the right equals -4 (which is 11111100 in binary).

• 
  

var temp

temp = -14 >> 2
Note: 32-bit integer type data has a sign bit problem, for For negative numbers, the padding bit is 1, and for positive numbers, it is 0. The numbers we get through charCodeAt() are all positive numbers, so don't worry about this problem.
For an 8-bit binary number, AND the binary 11110000 and then shift it right by 4 bits, you can get its leftmost four digits.
And 1111 directly, you can get the four digits on its right.
It’s enough to know so much about the preparation knowledge. Now let me start practicing coding.
said that there needs to be a string, so there is a string.
var strTest = "dknt has no meaning";
We just want to convert this string into a barcode.
We want to get its binary representation, then we build a function to get its binary representation. For example getBinary();
Such as

Tip: You can modify part of the code first and then run

<script>  
function getBinary(sText){  
   alert(sText);  
};  
var strTest = "dknt没有任何含义";  
getBinary(strTest );  
</script>

In order to obtain the binary representation, we have to proceed character by character, so don’t rush , first get the Unicode encoding corresponding to each character.

Characters greater than 255 obviously occupy two bytes. Find a way to split the data into two single bytes to make the program flow easier to automate. The first byte can be obtained by ANDing the two-byte value with binary 1111111100000000 and then shifting it right by 8 bits. Directly ANDing it with 11111111 will get the second byte of data. It might be more convenient to use hexadecimal numbers. The hexadecimal representation of 1111111100000000 is FF00. 11111111 is obviously FF.

<script>  
function getBinary(sText){  
   for(var i = 0; i < sText.length; i++){  
       alert( sText.charCodeAt( i ) );  
  }  
};  
var strTest = "dknt没有任何含义";  
getBinary(strTest );  
</script>

In J(ava)script, use 0x prefix to represent hexadecimal numbers. We can practice the following code.

<script>  
function getBinary(sText){  
   for(var i = 0; i < sText.length; i++){  
       var iDecimalUnicode =sText.charCodeAt( i );  
       if( iDecimalUnicode > 255 ){  
          alert( (iDecimalUnicode & 0xFF00) >> 8);  
          alert( iDecimalUnicode & 0xFF );  
       }else{  
          alert( iDecimalUnicode );  
       }  
  }  
};  
var strTest = "dknt没有任何含义";  
getBinary(strTest );  
</script>

   可以看到现在每个数都是小于255的了。
注意，(iDecimalUnicode & 0xFF00) >> 8 中，>> 的优先级比 & 高，所以按照我们的目的，(iDecimalUnicode & 0xFF00) 一定要有括号。 
我们希望能有个统一的处理逻辑，把每个字节分成两部分，每个部分用十六进制的1位就可以表示，换句话说，就是每部分都是一个不超过16的十进制数。类似Ruby中的代码段数据类型，在J(ava)script中，也可以用匿名函数来实现类似的功能。我们可以建一个名为tmpOP变量来承接这个匿名函数，然后利用它来简化程序逻辑。此外，我们应该有个东西来储存分解出来的结果。那就用个result数组来装吧。另外按照语义，我们这个函数做的已经不仅仅是转化二进制了，而是转化成意义上的十六进制位了。我们应该是恨敏捷的，所以把函数名改成getHexes吧。

<script> 
function getHexes(sText){ 
    var aResult = []; 
    var tmpOP = function(iByte){ 
        aResult.push( (iByte & 0xF0) >> 4 ); 
        aResult.push( iByte & 0xF ); 
    }; 
    for(var i = 0; i < sText.length; i++){ 
       var iDecimalUnicode =sText.charCodeAt( i ); 
       if( iDecimalUnicode > 255 ){ 
          tmpOP( (iDecimalUnicode & 0xFF00) >> 8); 
          tmpOP( iDecimalUnicode & 0xFF ); 
       }else{ 
          tmpOP( iDecimalUnicode ); 
       } 
    } 
    alert(aResult); 
}; 
var strTest = "dknt没有任何含义"; 
getHexes(strTest ); 
</script>

很高兴看到现在就弹出一个alert吧，刚才那么多alert是很闹心。我很抱歉。这次因为我们使用了alert一个数组，感觉整齐一点。
现在发现数组的每一个元素都是小于16了吧，很好，大象快装进去了。

有一个问题，我们不能把字符串的每个字符都转化成条形码，若是一个1万多字的文章怎么办，那不扯呢吗。所以我们要限制一下处理的字符数。以条形码的视点来看，似乎宽度应该是固定的，也就是说我们用以对应的 aResult 数组的长度应该是固定的。那也好办，在我们的 tmpOP 里控制一下就行了。我们可以假设我们只需要8个十六进制位来生成条形码。可以在getHexes里加一个 iMaxLength 参数来控制。
如下：

<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = []; 
    var tmpOP = function(iByte){ 
        aResult.push( (iByte & 0xF0) >> 4 ); 
        if( aResult.length > iMaxLength ) return 0; 
        aResult.push( iByte & 0xF ); 
        if( aResult.length > iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( (iDecimalUnicode & 0xFF00) >> 8) )  break;; 
            if( !tmpOP( iDecimalUnicode & 0xFF ) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode ) ) break; 
        } 
    } 
    alert(aResult); 
}; 
var strTest = "dknt没有任何含义"; 
var iWidth = 8; 
getHexes(strTest, iWidth); 
</script>

现在确实只有8个小于16的数了。

在 tmpOP 中，发现 aResult 数组的长度超过最大值，就返回一个0，外面发现这个0以后，就直接退出循环，因为没有必要再继续往下取字符了。

有些地方略显不妥，本着精益求精的精神，我们要把我们的程序效率提高提高。首先，我们知道了位相与的目的，就可以写一些更直接处理的代码，因为我们把处理双字节时，为了分成两个单字节，实际上多与运算了一次，和后面的分解双十六进制位有重复的位相与。说俗了就是多干了一次没用的事。不如一次就分解出4个十六进制位。

此外，我们总是向数组询问length属性来获知数组长度，要知道数组做这件事是很累的，反正我们也有条件自己心理有数，为什么还要总问它呢。

基于这两点，我们把程序改动如下：

<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0; 
    var tmpOP = function(iByte, iPos){ 
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 ); 
        iLength++ 
        if( iLength == iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( iDecimalUnicode , 3) ) break;; 
            if( !tmpOP( iDecimalUnicode , 2) ) break; 
            if( !tmpOP( iDecimalUnicode , 1) ) break; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode , 1) ) break;; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        } 
    } 
    alert(aResult); 
}; 
var strTest = "dknt没有任何含义"; 
var iWidth = 8; 
getHexes(strTest, iWidth); 
</script>

看到了效果跟上一个是一样的，说明我们没改错。其中，aPos数组就可以储存掩码，数组的索引 X 4 就是需要右移的位数。tmpOP( iDecimalUnicode , i) 就表示取 iDecimalUnicode 从右边数第i个十六进制位（第0个就是最右边的1个十六进制位）。

大象是勉勉强强塞进去了，下面我们就把活做的利索点，把冰箱门儿带上。要不条形码还没露面，我们怎么收场？

第三步，把冰箱门儿带上——封装和测试用例
接下来的工作重点就是要把条形码做出来。为了测试效果，我们还需要一个用户界面。
皮之不存，毛之焉附,首先做一个界面。随便做一个普通页面就行了。然后在上面安放一个文本框，一个触发按钮，一个条形码显示区域。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Barcode Test Case</title> 
</head> 
<body> 
<p style="float:left;"> 
    <input type="text" /> <input type="button" value="Generate"/> 
</p> 
<p style="float:left;"></p> 
</body> 
</html>

我们需要把大象移植过来，加在我们的界面上，此外我们还需要让按钮能触发getHexes函数，那就加一个 onclick方法吧。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Barcode Test Case</title> 
<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0; 
    var tmpOP = function(iByte, iPos){ 
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 ); 
        iLength++ 
        if( iLength == iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( iDecimalUnicode , 3) ) break;; 
            if( !tmpOP( iDecimalUnicode , 2) ) break; 
            if( !tmpOP( iDecimalUnicode , 1) ) break; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode , 1) ) break;; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        } 
    } 
    alert(aResult); 
}; 
var strTest = "dknt没有任何含义"; 
var iWidth = 8; 
</script> 
</head> 
<body> 
<div style="float:left;"> 
    <input type="text" /> <input type="button" value="Generate" onclick="getHexes(strTest, iWidth)"/> 
</div> 
<div style="float:left;"></div> 
</body> 
</html>

点击Generate按钮可以发现，我们之前的程序逻辑仍然生效。说明移植成功。

问题很大，getHexes始终操作的是一个固定的变量值，怎么让它能操作界面上的值呢？可以操作DOM来获取界面上的值。要使用DOM来操作，最简单的方法就是给所关注的元素上添加 id 属性。此外在 iWidth 这个变量在我们的界面中没有接口，看来是忘了，不过这个忘了很正常，当初根据我们的界面设计语义本来就没有这个内容。我们确实很敏捷，马上添加上去就行了。

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Barcode Test Case</title> 
<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0; 
    var tmpOP = function(iByte, iPos){ 
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 ); 
        iLength++ 
        if( iLength == iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( iDecimalUnicode , 3) ) break;; 
            if( !tmpOP( iDecimalUnicode , 2) ) break; 
            if( !tmpOP( iDecimalUnicode , 1) ) break; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode , 1) ) break;; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        } 
    } 
    alert(aResult); 
}; 
</script> 
</head> 
<body> 
<div style="float:left;"> 
    <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial"> 
        Text:
 
        Width:  
    </div> 
    <div style="float:left;"> 
        <input id="text" type="text" value="dknt没有任何含义" />
  
        <input id="width" type="text" value="8"/></div> 
    <div style="float:left;margin-left:20px"> 
        <input type="button" value="Generate" onclick="getHexes(document.getElementById(&#39;text&#39;).value, parseInt( document.getElementById 
(&#39;width&#39;).value) )"/></div> 
</div> 
<div style="float:left;"></div> 
</body>

注意，我们已经把b7874bb6054728ca33c0e5c76fa815d9 标签的
var strTest = "dknt没有任何含义";
var iWidth = 8;
两句去掉了。因为他们确实没有什么用了，我们已经不从那里获得数据了。
这回，如果你改动两个文本框中的文字，将会看到另外一组十六进制位。此外，我们觉得加一个对文本框的说明更好一些，所以就在前面加了个p.
现在我们发现似乎把一大串字符写在onlick里似乎有点不自然，如果将来逻辑更复杂了将很难维护，不如就单建个函数专门负责此事。它也可以包含更复杂的调度逻辑。此外，我们对两个文本框的类型没有验证，如果输入的不是我们想要的数据类型怎么办？所以还要加上判断逻辑。所以修改如下：

<!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">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Barcode Test Case</title>  
<script>  
function getHexes(sText, iMaxLength){  
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0;  
    var tmpOP = function(iByte, iPos){  
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 );  
        iLength++  
        if( iLength == iMaxLength ) return 0;  
        return 1;  
    };  
    for(var i = 0; i < sText.length; i++){  
        var iDecimalUnicode =sText.charCodeAt( i );  
        if( iDecimalUnicode > 255 ){  
            if( !tmpOP( iDecimalUnicode , 3) ) break;;  
            if( !tmpOP( iDecimalUnicode , 2) ) break;  
            if( !tmpOP( iDecimalUnicode , 1) ) break;  
            if( !tmpOP( iDecimalUnicode , 0) ) break;  
        }else{  
            if( !tmpOP( iDecimalUnicode , 1) ) break;;  
            if( !tmpOP( iDecimalUnicode , 0) ) break;  
        }  
    }  
    alert(aResult);  
};  
function GenerateBarCode(){  
    var sText = document.getElementById(&#39;text&#39;).value,  
            iWidth = parseInt( document.getElementById(&#39;width&#39;).value );  
    sText = sText.replace(/(^\s+|\s+$)/ig, &#39;&#39;);  
    iWidth = iWidth || 0;  
    if( iWidth > 20 || iWidth < 0) return false;  
    if(sText.length < iWidth ) return false;  
      
    getHexes(sText, iWidth)  
}  
</script>  
</head>  
<body>  
<div style="float:left;">  
    <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial">  
        Text:
  
        Width:   
    </div>  
    <div style="float:left;">  
        <input id="text" type="text" value="dknt没有任何含义" />
   
        <input id="width" type="text" value="8"/></div>  
    <div style="float:left;margin-left:20px">  
        <input type="button" value="Generate" onclick="GenerateBarCode()"/></div>  
</div>  
<div style="float:left;"></div>  
</body>

GenerateBarCode 要去掉text左右的空格，然后还要检查width是否是有效值(这里最大设为20，不过你可以随便改，太大似乎就有点变态了)。

然而我们的条形码还是没出来，但是我们已经恨厌倦alert了，这次一定要让getHexes返回一个数组给GenerateBarCode，然后让GenerateBarCode进行后续处理。

<title>Barcode Test Case</title> 
<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0; 
    var tmpOP = function(iByte, iPos){ 
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 ); 
        iLength++ 
        if( iLength == iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( iDecimalUnicode , 3) ) break;; 
            if( !tmpOP( iDecimalUnicode , 2) ) break; 
            if( !tmpOP( iDecimalUnicode , 1) ) break; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode , 1) ) break;; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        } 
    } 
    return aResult ; 
}; 
function GenerateBarCode(){ 
    var sText = document.getElementById(&#39;text&#39;).value, 
            iWidth = parseInt( document.getElementById(&#39;width&#39;).value ); 
    sText = sText.replace(/(^\s+|\s+$)/ig, &#39;&#39;); 
    iWidth = iWidth || 0; 
    if( iWidth > 20 || iWidth < 1) return false; 
     
    var aHexes = getHexes(sText, iWidth), sDivString=&#39;&#39;; 
    for (var i = 0; i < iWidth; i++){ 
        sDivString += "<div style=\"width:8px;height:8px;float:left;background-image:url("+gifURL+");background-position-x:"+(8 * aHexes[i]) 
+"px\"></div>" 
    } 
    document.getElementById(&#39;BarCode_Field&#39;).innerHTML = sDivString; 
} 
var gifURL = "/upload/200742411119165.gif"; 
</script> 
</head> 
<body> 
<div style="float:left;"> 
    <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial"> 
        Text:
 
        Width:  
    </div> 
    <div style="float:left;"> 
        <input id="text" type="text" value="dknt没有任何含义" />
  
        <input id="width" type="text" value="8"/></div> 
    <div style="float:left;margin-left:20px"> 
        <input type="button" value="Generate" onclick="GenerateBarCode()"/></div> 
</div> 
<div id="BarCode_Field" style="float:left;margin-left:20px"></div> 
</body>

GenerateBarCode接到getHexes传过来的数组以后开始使用其中的十六进制位构造DIV小单元。其中，我们用 background-image 来指明背景文件的位置，正好我刚才上传了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景图片水平方向偏移，我们用十六进制位（范围是0-15） X 8 (即gif小单元的像素宽度) 正好就可以让我们想要的gif小单元作为当前div的背景了。这就是我们的gif为什么要做成那样的原因。实际上，之所以要把所有的小单元放在一个图片里，主要是为了节省I/O调用的次数，提高效率。 

GenerateBarCode中的for循环，终止条件是iWidth，以便让sText补足iWidth位时，也能显示出 iWidth 位来，因为数组空元素的默认值可以返回0。 

我们给承接结果的div赋以id为BarCode_Field，将构造好的HTML片段放在这个div中，页面就可以呈现出条形码了。 

然而似乎还是没看到条形码。那当然了，我们的gif背景透明色已经让页面的背景白色透过来了，白成一片了，当然看不着。我们得改一下Body的背景颜色。如下：

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Barcode Test Case</title> 
<script> 
function getHexes(sText, iMaxLength){ 
    var aResult = [], aPos=[0xF, 0xF0, 0xF00, 0xF000], iLength = 0; 
    var tmpOP = function(iByte, iPos){ 
        aResult.push( (iByte & aPos[iPos]) >> iPos * 4 ); 
        iLength++ 
        if( iLength == iMaxLength ) return 0; 
        return 1; 
    }; 
    for(var i = 0; i < sText.length; i++){ 
        var iDecimalUnicode =sText.charCodeAt( i ); 
        if( iDecimalUnicode > 255 ){ 
            if( !tmpOP( iDecimalUnicode , 3) ) break;; 
            if( !tmpOP( iDecimalUnicode , 2) ) break; 
            if( !tmpOP( iDecimalUnicode , 1) ) break; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        }else{ 
            if( !tmpOP( iDecimalUnicode , 1) ) break;; 
            if( !tmpOP( iDecimalUnicode , 0) ) break; 
        } 
    } 
    return aResult ; 
}; 
function GenerateBarCode(){ 
    var sText = document.getElementById(&#39;text&#39;).value, 
            iWidth = parseInt( document.getElementById(&#39;width&#39;).value ); 
    sText = sText.replace(/(^\s+|\s+$)/ig, &#39;&#39;); 
    iWidth = iWidth || 0; 
    if( iWidth > 20 || iWidth < 1) return false; 
     
    var aHexes = getHexes(sText, iWidth), sDivString=&#39;&#39;; 
    for (var i = 0; i < iWidth; i++){ 
        sDivString += "<div style=\"width:8px;height:8px;float:left;background-image:url("+gifURL+");background-position-x:"+(8 * aHexes[i]) 
+"px\"></div>" 
    } 
    document.getElementById(&#39;BarCode_Field&#39;).innerHTML = sDivString; 
} 
var gifURL = "/upload/200742411119165.gif"; 
</script> 
</head> 
<body style="background-color:#000000; color:white"> 
<div style="float:left;"> 
    <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial"> 
        Text:
 
        Width:  
    </div> 
    <div style="float:left;"> 
        <input id="text" type="text" value="dknt没有任何含义" />
  
        <input id="width" type="text" value="8"/></div> 
    <div style="float:left;margin-left:20px"> 
        <input type="button" value="Generate" onclick="GenerateBarCode()"/></div> 
</div> 
<div id="BarCode_Field" style="float:left;margin-left:20px"></div> 
</body>

大功告成。