快捷導(dǎo)航

手把手教你做超酷的條形碼效果第2/3頁

更新時(shí)間：2007年04月24日 00:00:00 作者：

第三步，把冰箱門兒帶上——封裝和測試用例
接下來的工作重點(diǎn)就是要把條形碼做出來。為了測試效果，我們還需要一個(gè)用戶界面。
皮之不存，毛之焉附,首先做一個(gè)界面。隨便做一個(gè)普通頁面就行了。然后在上面安放一個(gè)文本框，一個(gè)觸發(fā)按鈕，一個(gè)條形碼顯示區(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>
我們需要把大象移植過來，加在我們的界面上，此外我們還需要讓按鈕能觸發(fā)getHexes函數(shù)，那就加一個(gè) onclick方法吧。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

點(diǎn)擊Generate按鈕可以發(fā)現(xiàn)，我們之前的程序邏輯仍然生效。說明移植成功。

問題很大，getHexes始終操作的是一個(gè)固定的變量值，怎么讓它能操作界面上的值呢？可以操作DOM來獲取界面上的值。要使用DOM來操作，最簡單的方法就是給所關(guān)注的元素上添加 id 屬性。此外在 iWidth 這個(gè)變量在我們的界面中沒有接口，看來是忘了，不過這個(gè)忘了很正常，當(dāng)初根據(jù)我們的界面設(shè)計(jì)語義本來就沒有這個(gè)內(nèi)容。我們確實(shí)很敏捷，馬上添加上去就行了。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

注意，我們已經(jīng)把<script /> 標(biāo)簽的
var strTest = "dknt沒有任何含義";
var iWidth = 8;
兩句去掉了。因?yàn)樗麄兇_實(shí)沒有什么用了，我們已經(jīng)不從那里獲得數(shù)據(jù)了。
這回，如果你改動(dòng)兩個(gè)文本框中的文字，將會看到另外一組十六進(jìn)制位。此外，我們覺得加一個(gè)對文本框的說明更好一些，所以就在前面加了個(gè)div.
現(xiàn)在我們發(fā)現(xiàn)似乎把一大串字符寫在onlick里似乎有點(diǎn)不自然，如果將來邏輯更復(fù)雜了將很難維護(hù)，不如就單建個(gè)函數(shù)專門負(fù)責(zé)此事。它也可以包含更復(fù)雜的調(diào)度邏輯。此外，我們對兩個(gè)文本框的類型沒有驗(yàn)證，如果輸入的不是我們想要的數(shù)據(jù)類型怎么辦？所以還要加上判斷邏輯。所以修改如下：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

GenerateBarCode 要去掉text左右的空格，然后還要檢查width是否是有效值(這里最大設(shè)為20，不過你可以隨便改，太大似乎就有點(diǎn)變態(tài)了)。

您可能感興趣的文章: