现在我们发现似乎把一大串字符写在onlick里似乎有点不自然,如果将来逻辑更复杂了将很难维护,不如就单建个函数专门负责此事。它也可以包含更复杂的调度逻辑。此外,我们对两个文本框的类型没有验证,如果输入的不是我们想要的数据类型怎么办?所以还要加上判断逻辑。所以修改如下:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
GenerateBarCode 要去掉text左右的空格,然后还要检查width是否是有效值(这里最大设为20,不过你可以随便改,太大似乎就有点变态了)。
然而我们的条形码还是没出来,但是我们已经恨厌倦alert了,这次一定要让getHexes返回一个数组给GenerateBarCode,然后让GenerateBarCode进行后续处理。
运行代码框
[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的背景颜色。如下:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
大功告成。
最后,给大家贴一个更完美一点的版本,不细述了。
运行代码框
[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标准化版块参加讨论,我还想发表评论。
|