手把手教你做超酷的条形码效果 - 网页制作

　手把手教你做超酷的条形码效果

作者：dknt　时间： 2007-11-30　文档类型：原创　来自：蓝色理想

手把手教你做超酷的条形码效果 [1]
手把手教你做超酷的条形码效果 [2]
手把手教你做超酷的条形码效果 [3]
手把手教你做超酷的条形码效果 [4]
手把手教你做超酷的条形码效果 [5]

现在我们发现似乎把一大串字符写在onlick里似乎有点不自然，如果将来逻辑更复杂了将很难维护，不如就单建个函数专门负责此事。它也可以包含更复杂的调度逻辑。此外，我们对两个文本框的类型没有验证，如果输入的不是我们想要的数据类型怎么办？所以还要加上判断逻辑。所以修改如下：

GenerateBarCode 要去掉text左右的空格，然后还要检查width是否是有效值(这里最大设为20，不过你可以随便改，太大似乎就有点变态了)。

然而我们的条形码还是没出来，但是我们已经恨厌倦alert了，这次一定要让getHexes返回一个数组给GenerateBarCode，然后让GenerateBarCode进行后续处理。

GenerateBarCode接到getHexes传过来的数组以后开始使用其中的十六进制位构造DIV小单元。其中，我们用 background-image 来指明背景文件的位置，正好我刚才上传了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景图片水平方向偏移，我们用十六进制位（范围是0-15） X 8 (即gif小单元的像素宽度) 正好就可以让我们想要的gif小单元作为当前div的背景了。这就是我们的gif为什么要做成那样的原因。实际上，之所以要把所有的小单元放在一个图片里，主要是为了节省I/O调用的次数，提高效率。

GenerateBarCode中的for循环，终止条件是iWidth，以便让sText补足iWidth位时，也能显示出 iWidth 位来，因为数组空元素的默认值可以返回0。

我们给承接结果的div赋以id为BarCode_Field，将构造好的HTML片段放在这个div中，页面就可以呈现出条形码了。

然而似乎还是没看到条形码。那当然了，我们的gif背景透明色已经让页面的背景白色透过来了，白成一片了，当然看不着。我们得改一下Body的背景颜色。如下：

大功告成。

最后，给大家贴一个更完美一点的版本，不细述了。

运行代码框
<!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 全部选择提示：你可先修改部分代码，再按运行]

其中修改了一些地方，以使得在Firefox也能显示。首先。Firefox只能识别标准的background-position属性，接受两个值，我们只要把第二个值设为0就可以了。
此外，SELECT对象添加option元素也有一点小区别。

经典论坛讨论：
http://bbs.blueidea.com/thread-2737823-1-231.html

本文链接：http://www.blueidea.com/tech/web/2007/5131.asp　

出处：蓝色理想
责任编辑：moby

上一页手把手教你做超酷的条形码效果 [5] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

作者文章

ImageLoader 1.1 Release

站点最新

站点最新列表

经典设计案例:丢猫千万别找设计师

UI AWARD 2010提名奖名单揭晓

网站设计解构

赢在设计

WAP2.0网页设计中的交互细节

画在信封上

数据同步算法研究

Flash ActionScript 3.0溢彩编程

用ps作简单的作品展示页面

CSS定位机制之一:普通流

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule