男女视频黄三级18禁,国产精品免费视频观看拍拍

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

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

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

現(xiàn)在我們發(fā)現(xiàn)似乎把一大串字符寫在onlick里似乎有點(diǎn)不自然，如果將來邏輯更復(fù)雜了將很難維護(hù)，不如就單建個(gè)函數(shù)專門負(fù)責(zé)此事。它也可以包含更復(fù)雜的調(diào)度邏輯。此外，我們對(duì)兩個(gè)文本框的類型沒有驗(yàn)證，如果輸入的不是我們想要的數(shù)據(jù)類型怎么辦？所以還要加上判斷邏輯。所以修改如下：

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

然而我們的條形碼還是沒出來，但是我們已經(jīng)恨厭倦alert了，這次一定要讓getHexes返回一個(gè)數(shù)組給GenerateBarCode，然后讓GenerateBarCode進(jìn)行后續(xù)處理。

GenerateBarCode接到getHexes傳過來的數(shù)組以后開始使用其中的十六進(jìn)制位構(gòu)造DIV小單元。其中，我們用 background-image 來指明背景文件的位置，正好我剛才上傳了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景圖片水平方向偏移，我們用十六進(jìn)制位（范圍是0-15） X 8 (即gif小單元的像素寬度) 正好就可以讓我們想要的gif小單元作為當(dāng)前div的背景了。這就是我們的gif為什么要做成那樣的原因。實(shí)際上，之所以要把所有的小單元放在一個(gè)圖片里，主要是為了節(jié)省I/O調(diào)用的次數(shù)，提高效率。

GenerateBarCode中的for循環(huán)，終止條件是iWidth，以便讓sText補(bǔ)足iWidth位時(shí)，也能顯示出 iWidth 位來，因?yàn)閿?shù)組空元素的默認(rèn)值可以返回0。

我們給承接結(jié)果的div賦以id為BarCode_Field，將構(gòu)造好的HTML片段放在這個(gè)div中，頁面就可以呈現(xiàn)出條形碼了。

然而似乎還是沒看到條形碼。那當(dāng)然了，我們的gif背景透明色已經(jīng)讓頁面的背景白色透過來了，白成一片了，當(dāng)然看不著。我們得改一下Body的背景顏色。如下：

大功告成。

最后，給大家貼一個(gè)更完美一點(diǎn)的版本，不細(xì)述了。

運(yùn)行代碼框
<!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; } } return aResult ; }; function GenerateBarCode(){ var sText = document.getElementById('text').value, iWidth = parseInt( document.getElementById('width').value ), iHeight = parseInt( document.getElementById('height').value ); sText = sText.replace(/(^\s+|\s+$)/ig, ''); iWidth = iWidth || 0; iHeight = iHeight || 8; if( iWidth > 20 || iWidth < 1) return false; if( iHeight > 50 || iHeight < 8) iHeight = 8; var oColor = document.getElementById('color'), sColor = aColors[parseInt(oColor.options[oColor.selectedIndex].value) ]; var aHexes = getHexes(sText, iWidth), sDivString=''; for (var i = 0; i < iWidth; i++){ sDivString += "<div style=\"width:8px;height:"+iHeight+"px;float:left;background-image:url("+gifURL+");background-position:"+(8 * aHexes[i])+"px 0px; line-height:0px;background-color:"+sColor+"\"> </div>" } document.getElementById('BarCode_Field').innerHTML = sDivString; } function fillSelect(){ var oSelect = document.getElementById('color'); if(document.all){ var f = function(e){oSelect.add(e)}; }else{ var f = function(e){oSelect.appendChild(e)}; } for(var i=0; i < aColors.length; i++){ var oOption = document.createElement("OPTION"); oOption.text = aColors[i]; oOption.value= i; oOption.style.backgroundColor = aColors[i]; f(oOption); } oSelect.selectedIndex = 7; } var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.gif"; var aColors = ['aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black','blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate','coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue','dimgray','dodgerblue','firebrick','floralwhite','forestgreen','Fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen','lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta','maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy','oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff','peru','pink','plum','powderblue','purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen','seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen','steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat','white','whitesmoke','yellow','yellowgreen']; </script> </head> <body style="background-color:#000000; color:white" onload="fillSelect()"> <div style="float:left;"> <div style="float:left; width:170px; font-size:18px;line-height:25px; font-family:Arial"> Text:<br /> Width: <br /> Height: <br /> Background Color: </div> <div style="float:left;"> <input id="text" type="text" value="dknt沒有任何含義" /><br /> <input id="width" type="text" value="8"/><br /> <input id="height" type="text" value="8"/><br /> <SELECT id="color" style="width:100px"></SELECT></div> <div style="float:left;margin-left:20px"> <input type="button" value="Generate" onclick="GenerateBarCode()"/></div> </div> <div id="BarCode_Field" style="float:left;margin-left:20px"></div> </body>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

其中修改了一些地方，以使得在Firefox也能顯示。首先。Firefox只能識(shí)別標(biāo)準(zhǔn)的background-position屬性，接受兩個(gè)值，我們只要把第二個(gè)值設(shè)為0就可以了。
此外，SELECT對(duì)象添加option元素也有一點(diǎn)小區(qū)別。

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2737823-1-231.html

本文鏈接：http://www.95time.cn/tech/web/2007/5131.asp　

出處：藍(lán)色理想
責(zé)任編輯：moby

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

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

Firewoks打造液體金屬表面效果

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

Javascript的一種模塊模式

用javascript來實(shí)現(xiàn)動(dòng)畫導(dǎo)航

JS擴(kuò)展Photoshop新功能

作者文章

ImageLoader 1.1 Release


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

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

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

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

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

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

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

如何在illustrator中繪制臺(tái)歷

Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)

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

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

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

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

Photoshop制作印刷凹凸字體

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

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