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

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

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

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

第三步，把冰箱门儿带上——封装和测试用例

接下来的工作重点就是要把条形码做出来。为了测试效果，我们还需要一个用户界面。

皮之不存，毛之焉附,首先做一个界面。随便做一个普通页面就行了。然后在上面安放一个文本框，一个触发按钮，一个条形码显示区域。

我们需要把大象移植过来，加在我们的界面上，此外我们还需要让按钮能触发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.

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

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

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

相关文章

JS扩展Photoshop新功能

作者文章

ImageLoader 1.1 Release


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

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

如何在illustrator中绘制台历

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

数据同步算法研究

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

CSS定位机制之一:普通流

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

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

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule