手把手教你做超酷的條形碼效果第3/3頁
更新時(shí)間:2007年04月24日 00:00:00 作者:
然而我們的條形碼還是沒出來,但是我們已經(jīng)恨厭倦alert了,這次一定要讓getHexes返回一個(gè)數(shù)組給GenerateBarCode,然后讓GenerateBarCode進(jìn)行后續(xù)處理。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
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的背景顏色。如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
大功告成。
最后,給大家貼一個(gè)更完美一點(diǎn)的版本,不細(xì)述了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
其中修改了一些地方,以使得在Firefox也能顯示。首先。Firefox只能識別標(biāo)準(zhǔn)的background-position屬性,接受兩個(gè)值,我們只要把第二個(gè)值設(shè)為0就可以了。
此外,SELECT對象添加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沒有任何含義" /><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只能識別標(biāo)準(zhǔn)的background-position屬性,接受兩個(gè)值,我們只要把第二個(gè)值設(shè)為0就可以了。
此外,SELECT對象添加option元素也有一點(diǎn)小區(qū)別。
您可能感興趣的文章:
- ASP.net(c#)生成條形碼 code39條碼生成方法
- php生成EAN_13標(biāo)準(zhǔn)條形碼實(shí)例
- asp.net用Zxing庫實(shí)現(xiàn)條形碼輸出的具體實(shí)現(xiàn)
- php實(shí)現(xiàn)在線生成條形碼示例分享(條形碼生成器)
- zbar解碼二維碼和條形碼示例
- asp.net(C#)生成Code39條形碼實(shí)例 條碼槍可以掃描出
- Android上使用ZXing識別條形碼與二維碼的方法
- C#生成code128條形碼的方法
- C#生成條形碼圖片的簡單方法
- 史上最簡潔C# 生成條形碼圖片思路及示例分享
- C#實(shí)現(xiàn)用于生成條形碼的類
- C#生成Code39條形碼而非條形碼字體的方法
- PHP生成條形碼大揭秘
相關(guān)文章
JavaScript用二分法查找數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了JavaScript用二分法查找數(shù)據(jù)的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06javascript小組件 原生table排序表格腳本(兼容ie firefox opera chrome)
javascript小組件 原生table排序表格腳本 兼容ie firefox opera chrome,需要的朋友可以參考下2012-07-07Bootstrap實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng)(親測可用)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)省市區(qū)三級聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個(gè)以數(shù)據(jù)模型(data model)為基礎(chǔ)的能夠幫助你創(chuàng)建富文本,響應(yīng)顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10