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

2008-10-17 19:58:25 佚名

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

<!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;

}

}

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进行后续处理。
运行代码框

<!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 );

sText = sText.replace(/(^\s |\s $)/ig, '');

iWidth = iWidth || 0;

if( iWidth > 20 || iWidth < 1) return false;

var aHexes = getHexes(sText, iWidth), sDivString='';

for (var i = 0; i < iWidth; i  ){

sDivString  = "<div style=\"width:8px;height:8px;float:left;background-image:url(" gifURL ");background-position-x:" (8 * aHexes[i])

 "px\"></div>"

}

document.getElementById('BarCode_Field').innerHTML = sDivString;

}

var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.gif";

</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 id="BarCode_Field" style="float:left;margin-left:20px"></div>

</body>

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

sText = sText.replace(/(^\s |\s $)/ig, '');

iWidth = iWidth || 0;

if( iWidth > 20 || iWidth < 1) return false;

var aHexes = getHexes(sText, iWidth), sDivString='';

for (var i = 0; i < iWidth; i  ){

sDivString  = "<div style=\"width:8px;height:8px;float:left;background-image:url(" gifURL ");background-position-x:" (8 * aHexes[i])

 "px\"></div>"

}

document.getElementById('BarCode_Field').innerHTML = sDivString;

}

var gifURL = "http://bbs.blueidea.com/attachments/2007/4/17/20070417_66e422bbe8354fcdee70Gq0DEKDsQMBc.gif";

</script>

</head>

<body style="background-color:#000000; color:white">

<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 id="BarCode_Field" style="float:left;margin-left:20px"></div>

</body>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
大功告成。
最后，给大家贴一个更完美一点的版本，不细述了。
运行代码框

<!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 "\">&nbsp;</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元素也有一点小区别。

上一页 1 2 3 4 5 6下一页阅读全文