聲明：

這篇文章教你在web頁面上實現(xiàn)條形碼效果，體現(xiàn)的是利用網(wǎng)頁制作技術(shù)綜合解決問題的思路。旨在使對HTML, JavaScript，PhotoShop具有入門級水平的人鞏固入門級水平。 若有問題不能及時回復(fù)，麻煩請擔(dān)待，不勝感激。 高手免進(jìn)。

制作條形碼總共分幾步？
第一步，把冰箱門兒打開——使用PhotoShop繪制小圖片
我們需要制作出一個含有16個元素的條形碼圖片。
首先打開Photoshop，本篇教程中使用的是CS 簡體中文 版本，僅就本教程所涉及的方面來看，操作都大同小異，只要認(rèn)真閱讀，應(yīng)該不會遇到問題。
打開以后首先按Ctrl N，建一個 8像素 X 8像素的圖片，背景選擇透明，如圖所示：

為了看清楚，可以把圖片縮放到最大 1600%。
按一下D，再按一下X，確保前景色為白色背景色為黑色。
使用Ctrl Delele，填充背景色，黑色。
使用鉛筆筆工具，參數(shù)做如下設(shè)置：

刻畫線條，隔一列畫一個。畫成下面這種效果：

將圖層1拖動到下面的新建按鈕上復(fù)制一下：

選擇 圖層1 副本,將左邊第一道白色用鉛筆工具涂成黑色（可以按 X 將前景色變成黑色）。如下圖所示：

#p#
選擇 圖層1 ，按Ctrl A，再按 Ctrl C，然后選擇菜單命令圖像=畫布大小， 將寬度調(diào)整為16個像素，點中 定位 的最左邊中間的小塊，如下圖所示：

選擇 圖層1 副本。按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 副本 條目以選擇 圖層1 副本 的選區(qū)。按Ctrl Shift I 反選（這一系列也可以用魔術(shù)棒操作，選擇透明部分就可以了）。按Ctrl V 粘貼成 圖層2。
關(guān)閉 圖層1 和 圖層1 副本 的可見性（左鍵點擊小眼睛圖標(biāo)），選擇圖層2，將左邊第二道白色用鉛筆工具涂成黑色。如下圖所示：

打開 圖層1副本 的可見性，確保選擇了圖層2，按Ctrl E 向下合并。
打開 圖層1 的可見性，按住Ctrl鍵，左鍵單擊圖層面板上的 圖層1 條目以選擇 圖層1 的選區(qū)。復(fù)制并擴(kuò)大畫布，按前面所述的方法繼續(xù)繪制。在寬度為24,32的時候再做兩次，分別把 圖層1 模式(pattern)的第三和第四條白色涂成黑色。最后的結(jié)果如下圖所示：

接下來還需要拓寬，方法是一樣的，只不過這次的模式變換的方案是把相鄰兩個白色之間的黑色涂成白色。比如第五次拓展，其模式是這個樣子：

再做幾次后，等寬度為 64 時，畫布看起來應(yīng)該是這個樣子的：

接下來仍然需要拓寬，思想是刪掉相鄰兩個白色條(注意，可以認(rèn)為第4個白條和第一個白條是相鄰的)，于是再做4次的效果是這樣的：

還差32個像素就完成了，還需再拓寬，這次是填充兩個相鄰黑色條為白色條，最后效果如下：

圖層1 可以不要了，刪掉即可。
接下來我們要去掉黑色的部分，使其透明。使用魔棒工具，將選項做如下設(shè)置：

選擇以后，按delete鍵刪除，則整個畫布變成如下形式：

似乎亂七八糟，是PS對透明背景表達(dá)的問題，只要保證步驟對了，做成這個效果就行了。

大功告成選擇文件 -- 另存為，類型選擇為 gif, 可以起名叫 barcode.gif，在下下面的對話框中，透明這一項一定要選中。 找個合適的地方放好。
于是冰箱門打開了，如果你做出的不是這個樣子，用我這個做好的就行了，免得大象裝不進(jìn)去。
#p#
第二步，把大象裝進(jìn)去——代碼分析
我們的目標(biāo)是把一個字符串轉(zhuǎn)化為一個條形碼顯示在頁面上。那么一個字符串如何對應(yīng)出一個條形碼呢？上面做個128X8的圖片到底是要扯什么蛋？
我們可以考慮數(shù)據(jù)在存儲器中的最基本儲存單位——字節(jié)(byte) 一個字節(jié)是八位(bit)。一個8位二進(jìn)制數(shù)可以通過一個2位的十六進(jìn)制數(shù)表示，表示為 00 - FF。剛才提到了一個16，注意到了嗎？
如何把一個字符串轉(zhuǎn)換成字節(jié)表示呢？似乎不能直接表示，但是J(ava)script 中的字符串有一個charCodeAt()方法。我們知道單字節(jié)若表示整數(shù)，其范圍是 0 -255，雙字節(jié)若表
示正整數(shù)，范圍是 0 - 65535。charCodeAt()方法返回的是一個字符的Unicode表示，這種Unicode方案中，中文是兩個字節(jié)的，英文是一個字節(jié)的。所以對于一個英文字符它總是返回0 - 255 之間的正整數(shù)，對于一個中文字符，它總是返回 255 - 65535 之間的正整數(shù)（非精確范圍）。
再講一下位運(yùn)算的知識吧，節(jié)選自微軟的Jscript腳本參考手冊：
對于與運(yùn)算。 &運(yùn)算符查看兩個表達(dá)式的二進(jìn)制表示法的值，并執(zhí)行按位“與”操作。該操作的結(jié)果如下所示：
0101 (expression1)
1100 (expression2)
----
0100 (result)
任何時候，只要兩個表達(dá)式的某位都為 1，則結(jié)果的該位為 1。否則，結(jié)果的該位為 0。
對于移位運(yùn)算，比如右移運(yùn)算。expression1 >> expression2 中，>> 運(yùn)算符 把 expression1 的所有位向右移 expression2 指定的位數(shù)。expression1 的符號位被用來填充右移后左邊空出來的位。向右移出的位被丟棄。例如，下面的代碼被求值后，temp 的值是 -4：-14 （即二進(jìn)制的 11110010）右移兩位等于 -4 （即二進(jìn)制的 11111100）。
var temp
temp = -14 >> 2注：32位整數(shù)類型的數(shù)據(jù)有符號位的問題，對于負(fù)數(shù)，填充位為1，正數(shù)為0。我們通過charCodeAt()得到的數(shù)都是正數(shù)，所以不用管這個問題。
對于一個8位二進(jìn)制數(shù)，與二進(jìn)制 11110000 相與，再右移4位，則可以得到它的最左四位。
直接與 1111 相與，則可以得到他的右邊四位。
準(zhǔn)備知識了解這么多夠了，下面讓我開始實踐編碼。
說，要有一個字符串，于是就有了個字符串。
var strTest = "dknt沒有任何含義";
我們就是要把這個字符串轉(zhuǎn)化為一個條形碼。
我們要獲得它的二進(jìn)制表示，那我們就建一個函數(shù)來獲得它的二進(jìn)制表示。比如 getBinary();
如：
運(yùn)行代碼框
<script> function getBinary(sText){ alert(sText); }; var strTest = "dknt沒有任何含義"; getBinary(strTest ); </script>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
為了獲得二進(jìn)制表示，我們要一個字符一個字符的進(jìn)行，不能著急，首先要獲得每個字符對應(yīng)的Unicode編碼。
運(yùn)行代碼框
<script> function getBinary(sText){ for(var i = 0; i < sText.length; i ){ alert( sText.charCodeAt( i ) ); } }; var strTest = "dknt沒有任何含義"; getBinary(strTest ); </script>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
大于 255 的顯然是占用兩個字節(jié)的字符。要想辦法分成單一字節(jié)的兩個數(shù)據(jù)，以使程序流易于自動化一些。可以使用雙字節(jié)數(shù)值與 二進(jìn)制 1111111100000000 相與再右移8位來獲得第一個字節(jié)。直接與11111111相與就可以得到第二個字節(jié)的數(shù)據(jù)。使用十六進(jìn)制數(shù)可能更方便一點。1111111100000000 的十六進(jìn)制表示為 FF00。11111111顯然就是 FF了。
#p#
J(ava)script中，用0x前綴表示十六進(jìn)制數(shù)。我們可以實踐一下下面的代碼。
運(yùn)行代碼框
<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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
可以看到現(xiàn)在每個數(shù)都是小于255的了。
注意，(iDecimalUnicode & 0xFF00) >> 8 中，>> 的優(yōu)先級比 & 高，所以按照我們的目的，(iDecimalUnicode & 0xFF00) 一定要有括號。
我們希望能有個統(tǒng)一的處理邏輯，把每個字節(jié)分成兩部分，每個部分用十六進(jìn)制的1位就可以表示，換句話說，就是每部分都是一個不超過16的十進(jìn)制數(shù)。類似Ruby中的代碼段數(shù)據(jù)類型，在J(ava)script中，也可以用匿名函數(shù)來實現(xiàn)類似的功能。我們可以建一個名為tmpOP變量來承接這個匿名函數(shù)，然后利用它來簡化程序邏輯。此外，我們應(yīng)該有個東西來儲存分解出來的結(jié)果。那就用個result數(shù)組來裝吧。另外按照語義，我們這個函數(shù)做的已經(jīng)不僅僅是轉(zhuǎn)化二進(jìn)制了，而是轉(zhuǎn)化成意義上的十六進(jìn)制位了。我們應(yīng)該是恨敏捷的，所以把函數(shù)名改成getHexes吧。
運(yùn)行代碼框
<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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
很高興看到現(xiàn)在就彈出一個alert吧，剛才那么多alert是很鬧心。我很抱歉。這次因為我們使用了alert一個數(shù)組，感覺整齊一點。
現(xiàn)在發(fā)現(xiàn)數(shù)組的每一個元素都是小于16了吧，很好，大象快裝進(jìn)去了。
有一個問題，我們不能把字符串的每個字符都轉(zhuǎn)化成條形碼，若是一個1萬多字的文章怎么辦，那不扯呢嗎。所以我們要限制一下處理的字符數(shù)。以條形碼的視點來看，似乎寬度應(yīng)該是固定的，也就是說我們用以對應(yīng)的 aResult 數(shù)組的長度應(yīng)該是固定的。那也好辦，在我們的 tmpOP 里控制一下就行了。我們可以假設(shè)我們只需要8個十六進(jìn)制位來生成條形碼?？梢栽趃etHexes里加一個 iMaxLength 參數(shù)來控制。
如下：
運(yùn)行代碼框
<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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
現(xiàn)在確實只有8個小于16的數(shù)了。
在 tmpOP 中，發(fā)現(xiàn) aResult 數(shù)組的長度超過最大值，就返回一個0，外面發(fā)現(xiàn)這個0以后，就直接退出循環(huán)，因為沒有必要再繼續(xù)往下取字符了。
有些地方略顯不妥，本著精益求精的精神，我們要把我們的程序效率提高提高。首先，我們知道了位相與的目的，就可以寫一些更直接處理的代碼，因為我們把處理雙字節(jié)時，為了分成兩個單字節(jié)，實際上多與運(yùn)算了一次，和后面的分解雙十六進(jìn)制位有重復(fù)的位相與。說俗了就是多干了一次沒用的事。不如一次就分解出4個十六進(jìn)制位。
此外，我們總是向數(shù)組詢問length屬性來獲知數(shù)組長度，要知道數(shù)組做這件事是很累的，反正我們也有條件自己心理有數(shù)，為什么還要總問它呢。
基于這兩點，我們把程序改動如下：
運(yùn)行代碼框
<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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
看到了效果跟上一個是一樣的，說明我們沒改錯。其中，aPos數(shù)組就可以儲存掩碼，數(shù)組的索引 X 4 就是需要右移的位數(shù)。tmpOP( iDecimalUnicode , i) 就表示取 iDecimalUnicode 從右邊數(shù)第i個十六進(jìn)制位（第0個就是最右邊的1個十六進(jìn)制位）。
大象是勉勉強(qiáng)強(qiáng)塞進(jìn)去了，下面我們就把活做的利索點，把冰箱門兒帶上。要不條形碼還沒露面，我們怎么收場？
#p#
第三步，把冰箱門兒帶上——封裝和測試用例
接下來的工作重點就是要把條形碼做出來。為了測試效果，我們還需要一個用戶界面。
皮之不存，毛之焉附,首先做一個界面。隨便做一個普通頁面就行了。然后在上面安放一個文本框，一個觸發(fā)按鈕，一個條形碼顯示區(qū)域。
運(yùn)行代碼框
<!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> <div style="float:left;"> <input type="text" /> <input type="button" value="Generate"/> </div> <div style="float:left;"></div> </body> </html>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
我們需要把大象移植過來，加在我們的界面上，此外我們還需要讓按鈕能觸發(fā)getHexes函數(shù)，那就加一個 onclick方法吧。
運(yùn)行代碼框
<!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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
點擊Generate按鈕可以發(fā)現(xiàn)，我們之前的程序邏輯仍然生效。說明移植成功。
問題很大，getHexes始終操作的是一個固定的變量值，怎么讓它能操作界面上的值呢？可以操作DOM來獲取界面上的值。要使用DOM來操作，最簡單的方法就是給所關(guān)注的元素上添加 id 屬性。此外在 iWidth 這個變量在我們的界面中沒有接口，看來是忘了，不過這個忘了很正常，當(dāng)初根據(jù)我們的界面設(shè)計語義本來就沒有這個內(nèi)容。我們確實很敏捷，馬上添加上去就行了。
運(yùn)行代碼框
<!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:<br /> Width: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <input id="width" type="text" value="8"/></div> <div style="float:left;margin-left:20px"> <input type="button" value="Generate" onclick="getHexes(document.getElementById('text').value, parseInt( document.getElementById ('width').value) )"/></div> </div> <div style="float:left;"></div> </body>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
注意，我們已經(jīng)把<script /> 標(biāo)簽的
var strTest = "dknt沒有任何含義";
var iWidth = 8;
兩句去掉了。因為他們確實沒有什么用了，我們已經(jīng)不從那里獲得數(shù)據(jù)了。
這回，如果你改動兩個文本框中的文字，將會看到另外一組十六進(jìn)制位。此外，我們覺得加一個對文本框的說明更好一些，所以就在前面加了個div.
#p#
現(xiàn)在我們發(fā)現(xiàn)似乎把一大串字符寫在onlick里似乎有點不自然，如果將來邏輯更復(fù)雜了將很難維護(hù)，不如就單建個函數(shù)專門負(fù)責(zé)此事。它也可以包含更復(fù)雜的調(diào)度邏輯。此外，我們對兩個文本框的類型沒有驗證，如果輸入的不是我們想要的數(shù)據(jù)類型怎么辦？所以還要加上判斷邏輯。所以修改如下：
運(yùn)行代碼框
<!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('text').value, iWidth = parseInt( document.getElementById('width').value ); sText = sText.replace(/(^\s |\s $)/ig, ''); 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:<br /> Width: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
GenerateBarCode 要去掉text左右的空格，然后還要檢查width是否是有效值(這里最大設(shè)為20，不過你可以隨便改，太大似乎就有點變態(tài)了)。
然而我們的條形碼還是沒出來，但是我們已經(jīng)恨厭倦alert了，這次一定要讓getHexes返回一個數(shù)組給GenerateBarCode，然后讓GenerateBarCode進(jìn)行后續(xù)處理。
運(yùn)行代碼框
<!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('text').value, iWidth = parseInt( document.getElementById('width').value ); sText = sText.replace(/(^\s |\s $)/ig, ''); iWidth = iWidth || 0; if( iWidth > 20 || iWidth < 1) return false; var aHexes = getHexes(sText, iWidth), sDivString=''; 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('BarCode_Field').innerHTML = sDivString; } var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.gif"; </script> </head> <body> <div style="float:left;"> <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial"> Text:<br /> Width: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
GenerateBarCode接到getHexes傳過來的數(shù)組以后開始使用其中的十六進(jìn)制位構(gòu)造DIV小單元。其中，我們用 background-image 來指明背景文件的位置，正好我剛才上傳了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景圖片水平方向偏移，我們用十六進(jìn)制位（范圍是0-15） X 8 (即gif小單元的像素寬度) 正好就可以讓我們想要的gif小單元作為當(dāng)前div的背景了。這就是我們的gif為什么要做成那樣的原因。實際上，之所以要把所有的小單元放在一個圖片里，主要是為了節(jié)省I/O調(diào)用的次數(shù)，提高效率。
GenerateBarCode中的for循環(huán)，終止條件是iWidth，以便讓sText補(bǔ)足iWidth位時，也能顯示出 iWidth 位來，因為數(shù)組空元素的默認(rèn)值可以返回0。
我們給承接結(jié)果的div賦以id為BarCode_Field，將構(gòu)造好的HTML片段放在這個div中，頁面就可以呈現(xiàn)出條形碼了。
然而似乎還是沒看到條形碼。那當(dāng)然了，我們的gif背景透明色已經(jīng)讓頁面的背景白色透過來了，白成一片了，當(dāng)然看不著。我們得改一下Body的背景顏色。如下：
運(yùn)行代碼框
<!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('text').value, iWidth = parseInt( document.getElementById('width').value ); sText = sText.replace(/(^\s |\s $)/ig, ''); iWidth = iWidth || 0; if( iWidth > 20 || iWidth < 1) return false; var aHexes = getHexes(sText, iWidth), sDivString=''; 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('BarCode_Field').innerHTML = sDivString; } var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.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:<br /> Width: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
大功告成。
最后，給大家貼一個更完美一點的版本，不細(xì)述了。
運(yùn)行代碼框
<!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('text').value, iWidth = parseInt( document.getElementById('width').value ), iHeight = parseInt( document.getElementById('height').value ); sText = sText.replace(/(^\s |\s $)/ig, ''); iWidth = iWidth || 0; iHeight = iHeight || 8; if( iWidth > 20 || iWidth < 1) return false; if( iHeight > 50 || iHeight < 8) iHeight = 8; var oColor = document.getElementById('color'), sColor = aColors[parseInt(oColor.options[oColor.selectedIndex].value) ]; var aHexes = getHexes(sText, iWidth), sDivString=''; for (var i = 0; i < iWidth; i ){ sDivString = "<div style=\"width:8px;height:" iHeight "px;float:left;background-image:url(" gifURL ");background-position:" (8 * aHexes[i]) "px 0px; line-height:0px;background-color:" sColor "\">&nbsp;</div>" } document.getElementById('BarCode_Field').innerHTML = sDivString; } function fillSelect(){ var oSelect = document.getElementById('color'); if(document.all){ var f = function(e){oSelect.add(e)}; }else{ var f = function(e){oSelect.appendChild(e)}; } for(var i=0; i < aColors.length; i ){ var oOption = document.createElement("OPTION"); oOption.text = aColors[i]; oOption.value= i; oOption.style.backgroundColor = aColors[i]; f(oOption); } oSelect.selectedIndex = 7; } var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.gif"; var aColors = ['aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black','blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate','coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue','dimgray','dodgerblue','firebrick','floralwhite','forestgreen','Fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen','lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta','maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy','oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff','peru','pink','plum','powderblue','purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen','seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen','steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat','white','whitesmoke','yellow','yellowgreen']; </script> </head> <body style="background-color:#000000; color:white" onload="fillSelect()"> <div style="float:left;"> <div style="float:left; width:170px; font-size:18px;line-height:25px; font-family:Arial"> Text:<br /> Width: <br /> Height: <br /> Background Color: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <input id="width" type="text" value="8"/><br /> <input id="height" type="text" value="8"/><br /> <SELECT id="color" style="width:100px"></SELECT></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>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
其中修改了一些地方，以使得在Firefox也能顯示。首先。Firefox只能識別標(biāo)準(zhǔn)的background-position屬性，接受兩個值，我們只要把第二個值設(shè)為0就可以了。
此外，SELECT對象添加option元素也有一點小區(qū)別。

最新評論