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

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

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

第三步，把冰箱門兒帶上——封裝和測試用例
接下來的工作重點就是要把條形碼做出來。為了測試效果，我們還需要一個用戶界面。
皮之不存，毛之焉附,首先做一個界面。隨便做一個普通頁面就行了。然后在上面安放一個文本框，一個觸發(fā)按鈕，一個條形碼顯示區(qū)域。
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
我們需要把大象移植過來，加在我們的界面上，此外我們還需要讓按鈕能觸發(fā)getHexes函數(shù)，那就加一個 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>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]
點擊Generate按鈕可以發(fā)現(xiàn)，我們之前的程序邏輯仍然生效。說明移植成功。
問題很大，getHexes始終操作的是一個固定的變量值，怎么讓它能操作界面上的值呢？可以操作DOM來獲取界面上的值。要使用DOM來操作，最簡單的方法就是給所關(guān)注的元素上添加 id 屬性。此外在 iWidth 這個變量在我們的界面中沒有接口，看來是忘了，不過這個忘了很正常，當(dāng)初根據(jù)我們的界面設(shè)計語義本來就沒有這個內(nèi)容。我們確實很敏捷，馬上添加上去就行了。
運行代碼框

<!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 全部選擇提示：你可先修改部分代碼，再按運行]
注意，我們已經(jīng)把<script /> 標(biāo)簽的
var strTest = "dknt沒有任何含義";
var iWidth = 8;
兩句去掉了。因為他們確實沒有什么用了，我們已經(jīng)不從那里獲得數(shù)據(jù)了。
這回，如果你改動兩個文本框中的文字，將會看到另外一組十六進(jìn)制位。此外，我們覺得加一個對文本框的說明更好一些，所以就在前面加了個div.

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

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

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

相關(guān)文章

最新評論

文章分類

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

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