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

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

第三步，把冰箱门儿带上——封装和测试用例
接下来的工作重点就是要把条形码做出来。为了测试效果，我们还需要一个用户界面。
皮之不存，毛之焉附,首先做一个界面。随便做一个普通页面就行了。然后在上面安放一个文本框，一个触发按钮，一个条形码显示区域。
运行代码框

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

<div style="float:left;">

<input type="text" /> <input type="button" value="Generate"/>

</div>

<div style="float:left;"></div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
我们需要把大象移植过来，加在我们的界面上，此外我们还需要让按钮能触发getHexes函数，那就加一个 onclick方法吧。
运行代码框

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

};

var strTest = "dknt没有任何含义";

var iWidth = 8;

</script>

</head>

<body>

<div style="float:left;">

<input type="text" /> <input type="button" value="Generate" onclick="getHexes(strTest, iWidth)"/>

</div>

<div style="float:left;"></div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
点击Generate按钮可以发现，我们之前的程序逻辑仍然生效。说明移植成功。
问题很大，getHexes始终操作的是一个固定的变量值，怎么让它能操作界面上的值呢？可以操作DOM来获取界面上的值。要使用DOM来操作，最简单的方法就是给所关注的元素上添加 id 属性。此外在 iWidth 这个变量在我们的界面中没有接口，看来是忘了，不过这个忘了很正常，当初根据我们的界面设计语义本来就没有这个内容。我们确实很敏捷，马上添加上去就行了。
运行代码框

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

};

</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="getHexes(document.getElementById('text').value, parseInt( document.getElementById

('width').value) )"/></div>

</div>

<div style="float:left;"></div>

</body>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
注意，我们已经把<script /> 标签的
var strTest = "dknt没有任何含义";
var iWidth = 8;
两句去掉了。因为他们确实没有什么用了，我们已经不从那里获得数据了。
这回，如果你改动两个文本框中的文字，将会看到另外一组十六进制位。此外，我们觉得加一个对文本框的说明更好一些，所以就在前面加了个div.

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