无码一级二级三级,美女一级片手機看片影視,狼人久久中文字幕综合

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

作者：dknt　時間： 2007-11-30　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁手把手教你做超酷的條形碼效果 [1]
第 2 頁手把手教你做超酷的條形碼效果 [2]
第 3 頁手把手教你做超酷的條形碼效果 [3]
第 4 頁手把手教你做超酷的條形碼效果 [4]
第 5 頁手把手教你做超酷的條形碼效果 [5]
第 6 頁手把手教你做超酷的條形碼效果 [6]

第三步，把冰箱門兒帶上——封裝和測試用例

接下來的工作重點就是要把條形碼做出來。為了測試效果，我們還需要一個用戶界面。

皮之不存，毛之焉附,首先做一個界面。隨便做一個普通頁面就行了。然后在上面安放一個文本框，一個觸發(fā)按鈕，一個條形碼顯示區(qū)域。

我們需要把大象移植過來，加在我們的界面上，此外我們還需要讓按鈕能觸發(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來操作，最簡單的方法就是給所關注的元素上添加 id 屬性。此外在 iWidth 這個變量在我們的界面中沒有接口，看來是忘了，不過這個忘了很正常，當初根據(jù)我們的界面設計語義本來就沒有這個內(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 /> 標簽的
var strTest = "dknt沒有任何含義";
var iWidth = 8;
兩句去掉了。因為他們確實沒有什么用了，我們已經(jīng)不從那里獲得數(shù)據(jù)了。

這回，如果你改動兩個文本框中的文字，將會看到另外一組十六進制位。此外，我們覺得加一個對文本框的說明更好一些，所以就在前面加了個div.

出處：藍色理想
責任編輯：moby

上一頁手把手教你做超酷的條形碼效果 [4] 下一頁手把手教你做超酷的條形碼效果 [6]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。

相關文章

更多相關鏈接

Firewoks打造液體金屬表面效果

Firewoks制作立體質(zhì)感水晶

Javascript的一種模塊模式

用javascript來實現(xiàn)動畫導航

JS擴展Photoshop新功能

作者文章

ImageLoader 1.1 Release


關鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx