快捷導(dǎo)航

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

更新時(shí)間：2007年04月24日 00:00:00 作者：

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

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

GenerateBarCode接到getHexes傳過(guò)來(lái)的數(shù)組以后開(kāi)始使用其中的十六進(jìn)制位構(gòu)造DIV小單元。其中，我們用 background-image 來(lái)指明背景文件的位置，正好我剛才上傳了做好的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 位來(lái)，因?yàn)閿?shù)組空元素的默認(rèn)值可以返回0。

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

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

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

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

<!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 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:         Width:          Height:          Background Color:      </div>     <div style="float:left;">         <input id="text" type="text" value="dknt沒(méi)有任何含義" />          <input id="width" type="text" value="8"/>         <input id="height" type="text" value="8"/>         <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   class="wppm3vysvbp"   id="BarCode_Field" style="float:left;margin-left:20px"></div> </body>

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

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

您可能感興趣的文章: