手把手教你做超酷的條形碼效果第2/3頁(yè)
更新時(shí)間：2007年04月24日 00:00:00 作者：
第三步，把冰箱門兒帶上——封裝和測(cè)試用例
接下來(lái)的工作重點(diǎn)就是要把條形碼做出來(lái)。為了測(cè)試效果，我們還需要一個(gè)用戶界面。
皮之不存，毛之焉附,首先做一個(gè)界面。隨便做一個(gè)普通頁(yè)面就行了。然后在上面安放一個(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>
我們需要把大象移植過(guò)來(lái)，加在我們的界面上，此外我們還需要讓按鈕能觸發(fā)getHexes函數(shù)，那就加一個(gè) onclick方法吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
點(diǎn)擊Generate按鈕可以發(fā)現(xiàn)，我們之前的程序邏輯仍然生效。說(shuō)明移植成功。
問(wèn)題很大，getHexes始終操作的是一個(gè)固定的變量值，怎么讓它能操作界面上的值呢？可以操作DOM來(lái)獲取界面上的值。要使用DOM來(lái)操作，最簡(jiǎn)單的方法就是給所關(guān)注的元素上添加 id 屬性。此外在 iWidth 這個(gè)變量在我們的界面中沒(méi)有接口，看來(lái)是忘了，不過(guò)這個(gè)忘了很正常，當(dāng)初根據(jù)我們的界面設(shè)計(jì)語(yǔ)義本來(lái)就沒(méi)有這個(gè)內(nèi)容。我們確實(shí)很敏捷，馬上添加上去就行了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
注意，我們已經(jīng)把<script /> 標(biāo)簽的
var strTest = "dknt沒(méi)有任何含義";
var iWidth = 8;
兩句去掉了。因?yàn)樗麄兇_實(shí)沒(méi)有什么用了，我們已經(jīng)不從那里獲得數(shù)據(jù)了。
這回，如果你改動(dòng)兩個(gè)文本框中的文字，將會(huì)看到另外一組十六進(jìn)制位。此外，我們覺(jué)得加一個(gè)對(duì)文本框的說(shuō)明更好一些，所以就在前面加了個(gè)div.
現(xiàn)在我們發(fā)現(xiàn)似乎把一大串字符寫在onlick里似乎有點(diǎn)不自然，如果將來(lái)邏輯更復(fù)雜了將很難維護(hù)，不如就單建個(gè)函數(shù)專門負(fù)責(zé)此事。它也可以包含更復(fù)雜的調(diào)度邏輯。此外，我們對(duì)兩個(gè)文本框的類型沒(méi)有驗(yàn)證，如果輸入的不是我們想要的數(shù)據(jù)類型怎么辦？所以還要加上判斷邏輯。所以修改如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- ASP.net(c#)生成條形碼 code39條碼生成方法
- php生成EAN_13標(biāo)準(zhǔn)條形碼實(shí)例
- asp.net用Zxing庫(kù)實(shí)現(xiàn)條形碼輸出的具體實(shí)現(xiàn)
- php實(shí)現(xiàn)在線生成條形碼示例分享(條形碼生成器)
- zbar解碼二維碼和條形碼示例
- asp.net(C#)生成Code39條形碼實(shí)例 條碼槍可以掃描出
- Android上使用ZXing識(shí)別條形碼與二維碼的方法
- C#生成code128條形碼的方法
- C#生成條形碼圖片的簡(jiǎn)單方法
- 史上最簡(jiǎn)潔C# 生成條形碼圖片思路及示例分享
- C#實(shí)現(xiàn)用于生成條形碼的類
- C#生成Code39條形碼而非條形碼字體的方法
- PHP生成條形碼大揭秘
相關(guān)文章
Openlayers實(shí)現(xiàn)面積測(cè)量的方法
在Openlayers中,長(zhǎng)度和面積的測(cè)量均依賴ol/sphere模塊,長(zhǎng)度通過(guò)getLength方法計(jì)算,面積則通過(guò)getArea方法,面積測(cè)量不是計(jì)算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧2024-11-11
小程序頁(yè)面onload(),onready()加載順序詳解
本文主要介紹了小程序頁(yè)面onload(),onready()加載順序，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹的是如何利用fecha進(jìn)行JS日期處理，在日常項(xiàng)目中，經(jīng)常會(huì)碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時(shí)間處理起來(lái)往往力不從心。下面通過(guò)這篇文章來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
Kotlin學(xué)習(xí)第一步 kotlin語(yǔ)法特性
Kotlin學(xué)習(xí)第一步，從kotlin語(yǔ)法特性開(kāi)始學(xué)習(xí)，包括變量定義、函數(shù)擴(kuò)展、Parcelable序列化、編寫工具類等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
本文主要介紹了JavaScript過(guò)濾關(guān)鍵字的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要介紹了在css加載完畢后執(zhí)行后續(xù)代碼的方法,需要的朋友可以參考下2014-09-09
javascript代碼運(yùn)行的過(guò)程中基本類型會(huì)找到對(duì)應(yīng)的包裝對(duì)象，然后包裝對(duì)象把所有的屬性和方法給了基本類型，然后包裝對(duì)象被系統(tǒng)進(jìn)行銷毀，所以理解了包裝對(duì)象可以很好的理解之前寫的代碼為什么可以這樣做了。2015-07-07
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），相信大家對(duì)ajax都很熟悉，下面這篇文章主要給大家介紹了關(guān)于Ajax原理以及代碼封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
WebStorm中如何將自己的代碼上傳到github示例詳解
這篇文章主要介紹了WebStorm中如何將自己的代碼上傳到github,本文分步驟通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
使用JavaScript獲取Request中參數(shù)的值方法
下面小編就為大家?guī)?lái)一篇使用JavaScript獲取Request中參數(shù)的值方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09