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

更新時間：2007年04月24日 00:00:00 作者：

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

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

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

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

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

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

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

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

您可能感興趣的文章: