手把手教你做超酷的條形碼效果第3/3頁
更新時間：2007年04月24日 00:00:00 作者：
然而我們的條形碼還是沒出來，但是我們已經恨厭倦alert了，這次一定要讓getHexes返回一個數組給GenerateBarCode，然后讓GenerateBarCode進行后續(xù)處理。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
GenerateBarCode接到getHexes傳過來的數組以后開始使用其中的十六進制位構造DIV小單元。其中，我們用 background-image 來指明背景文件的位置，正好我剛才上傳了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景圖片水平方向偏移，我們用十六進制位（范圍是0-15） X 8 (即gif小單元的像素寬度) 正好就可以讓我們想要的gif小單元作為當前div的背景了。這就是我們的gif為什么要做成那樣的原因。實際上，之所以要把所有的小單元放在一個圖片里，主要是為了節(jié)省I/O調用的次數，提高效率。
GenerateBarCode中的for循環(huán)，終止條件是iWidth，以便讓sText補足iWidth位時，也能顯示出 iWidth 位來，因為數組空元素的默認值可以返回0。
我們給承接結果的div賦以id為BarCode_Field，將構造好的HTML片段放在這個div中，頁面就可以呈現出條形碼了。
然而似乎還是沒看到條形碼。那當然了，我們的gif背景透明色已經讓頁面的背景白色透過來了，白成一片了，當然看不著。我們得改一下Body的背景顏色。如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
大功告成。
最后，給大家貼一個更完美一點的版本，不細述了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
其中修改了一些地方，以使得在Firefox也能顯示。首先。Firefox只能識別標準的background-position屬性，接受兩個值，我們只要把第二個值設為0就可以了。
此外，SELECT對象添加option元素也有一點小區(qū)別。le.backgroundColor = aColors[i];
f(oOption);
}
oSelect.selectedIndex = 7;
}
var gifURL = "/upload/200742411119165.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>
[/html]
其中修改了一些地方，以使得在Firefox也能顯示。首先。Firefox只能識別標準的background-position屬性，接受兩個值，我們只要把第二個值設為0就可以了。
此外，SELECT對象添加option元素也有一點小區(qū)別。
相關文章
在Openlayers中,長度和面積的測量均依賴ol/sphere模塊,長度通過getLength方法計算,面積則通過getArea方法,面積測量不是計算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧2024-11-11
本文主要介紹了小程序頁面onload(),onready()加載順序，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹的是如何利用fecha進行JS日期處理，在日常項目中，經常會碰到日期處理的需求，這種需求千奇百怪，而且往往經常變化。雖然js提供了原生的Date方法供我們選擇，但一些復雜的日期時間處理起來往往力不從心。下面通過這篇文章來一起學習學習吧。2016-11-11
Kotlin學習第一步，從kotlin語法特性開始學習，包括變量定義、函數擴展、Parcelable序列化、編寫工具類等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本文主要介紹了JavaScript過濾關鍵字的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了在css加載完畢后執(zhí)行后續(xù)代碼的方法,需要的朋友可以參考下2014-09-09
javascript代碼運行的過程中基本類型會找到對應的包裝對象，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象被系統(tǒng)進行銷毀，所以理解了包裝對象可以很好的理解之前寫的代碼為什么可以這樣做了。2015-07-07
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），相信大家對ajax都很熟悉，下面這篇文章主要給大家介紹了關于Ajax原理以及代碼封裝的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
WebStorm中如何將自己的代碼上傳到github示例詳解
這篇文章主要介紹了WebStorm中如何將自己的代碼上傳到github,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
下面小編就為大家?guī)硪黄褂肑avaScript獲取Request中參數的值方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09