手把手教你做超酷的條形碼效果

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:58:25 作者：佚名

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

現(xiàn)在我們發(fā)現(xiàn)似乎把一大串字符寫在onlick里似乎有點不自然，如果將來邏輯更復雜了將很難維護，不如就單建個函數(shù)專門負責此事。它也可以包含更復雜的調(diào)度邏輯。此外，我們對兩個文本框的類型沒有驗證，如果輸入的不是我們想要的數(shù)據(jù)類型怎么辦？所以還要加上判斷邏輯。所以修改如下：
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
GenerateBarCode 要去掉text左右的空格，然后還要檢查width是否是有效值(這里最大設為20，不過你可以隨便改，太大似乎就有點變態(tài)了)。
然而我們的條形碼還是沒出來，但是我們已經(jīng)恨厭倦alert了，這次一定要讓getHexes返回一個數(shù)組給GenerateBarCode，然后讓GenerateBarCode進行后續(xù)處理。
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
GenerateBarCode接到getHexes傳過來的數(shù)組以后開始使用其中的十六進制位構造DIV小單元。其中，我們用 background-image 來指明背景文件的位置，正好我剛才上傳了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景圖片水平方向偏移，我們用十六進制位（范圍是0-15） X 8 (即gif小單元的像素寬度) 正好就可以讓我們想要的gif小單元作為當前div的背景了。這就是我們的gif為什么要做成那樣的原因。實際上，之所以要把所有的小單元放在一個圖片里，主要是為了節(jié)省I/O調(diào)用的次數(shù)，提高效率。
GenerateBarCode中的for循環(huán)，終止條件是iWidth，以便讓sText補足iWidth位時，也能顯示出 iWidth 位來，因為數(shù)組空元素的默認值可以返回0。
我們給承接結果的div賦以id為BarCode_Field，將構造好的HTML片段放在這個div中，頁面就可以呈現(xiàn)出條形碼了。
然而似乎還是沒看到條形碼。那當然了，我們的gif背景透明色已經(jīng)讓頁面的背景白色透過來了，白成一片了，當然看不著。我們得改一下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('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 全部選擇提示：你可先修改部分代碼，再按運行]
大功告成。
最后，給大家貼一個更完美一點的版本，不細述了。
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
其中修改了一些地方，以使得在Firefox也能顯示。首先。Firefox只能識別標準的background-position屬性，接受兩個值，我們只要把第二個值設為0就可以了。
此外，SELECT對象添加option元素也有一點小區(qū)別。

上一頁 1 2 3 4 5 6下一頁閱讀全文

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

手把手教你做超酷的條形碼效果

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容