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

来源：作者：dknt 出处：巧巧读书 2007-11-30 进入讨论组

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

所以修改如下：

运行代码框
<!DOCTYPE <a href="/keys/html/index.html" target="_blank">html</a> 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; } } alert(aResult); }; function GenerateBarCode(){ var sText = document.getElementById('text').value, iWidth = parseInt( document.getElementById('width').value ); sText = sText.replace(/(^\s+|\s+$)/ig, ''); iWidth = iWidth || 0; if( iWidth > 20 || iWidth < 0) return false; if(sText.length < iWidth ) return false; getHexes(sText, iWidth) } </script> </head> <body> <div style="float:left;"> <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial"> Text:<br /> Width: </div> <div style="float:left;"> <input id="text" type="text" value="dknt没有任何含义" /><br /> <input id="width" type="text" value="8"/></div> <div style="float:left;margin-left:20px"> <input type="button" value="Generate" onclick="GenerateBarCode()"/></div> </div> <div style="float:left;"></div> </body>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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://www.qqread.com/web-special/u383656.html进入讨论组讨论。

【深度阅读】相关文章

上一页 1 2 3 4 5 6

【收藏此文】【大中小】【打印】【关闭】

较早的文章：精挑细选网站关键词

较新的文章：几个不错的网页载入页面（网页好助手）

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

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

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

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月 境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

阳春三月境内境外赏花忙