get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是手把手教你做超酷的条形码效果，一起来学习了解下吧！
【 tulaoshi.com - Web开发 】
声明：
这篇文章教你在web页面上实现条形码效果，体现的是利用网页制作技术综合解决问题的思路。旨在使对HTML, JavaScript，PhotoShop具有入门级水平的人巩固入门级水平。 若有问题不能及时回复，麻烦请担待，不胜感激。 高手免进。制作条形码总共分几步？
第一步，把冰箱门儿打开使用PhotoShop绘制小图片
我们需要制作出一个含有16个元素的条形码图片。
首先打开Photoshop，本篇教程中使用的是CS 简体中文 版本，仅就本教程所涉及的方面来看，操作都大同小异，只要认真阅读，应该不会遇到问题。
打开以后首先按Ctrl + N，建一个 8像素 X 8像素的图片，背景选择透明，如图所示：
为了看清楚，可以把图片缩放到最大 1600%。
按一下D，再按一下X，确保前景色为白色背景色为黑色。
使用Ctrl+Delele，填充背景色，黑色。
使用铅笔笔工具，参数做如下设置：
刻画线条，隔一列画一个。画成下面这种效果：
将图层1拖动到下面的新建按钮上复制一下：
选择 图层1 副本,将左边第一道白色用铅笔工具涂成黑色（可以按 X 将前景色变成黑色）。如下图所示：
选择 图层1 ，按Ctrl+A，再按 Ctrl + C，然后选择菜单命令图像=画布大小， 将宽度调整为16个像素，点中 定位 的最左边中间的小块，如下图所示：
选择 图层1 副本。按住Ctrl键，左键单击图层面板上的 图层1 副本 条目以选择 图层1 副本 的选区。按Ctrl + Shift + I 反选（这一系列也可以用魔术棒操作，选择透明部分就可以了）。按Ctrl + V 粘贴成 图层2。
关闭 图层1 和 图层1 副本 的可见性（左键点击小眼睛图标），选择图层2，将左边第二道白色用铅笔工具涂成黑色。如下图所示：
打开 图层1副本 的可见性，确保选择了图层2，按Ctrl + E 向下合并。
打开 图层1 的可见性，按住Ctrl键，左键单击图层面板上的 图层1 条目以选择 图层1 的选区。复制并扩大画布，按前面所述的方法继续绘制。在宽度为24,32的时候再做两次，分别把 图层1 模式(pattern)的第三和第四条白色涂成黑色。最后的结果如下图所示：
接下来还需要拓宽，方法是一样的，只不过这次的模式变换的方案是把相邻两个白色之间的黑色涂成白色。比如第五次拓展，其模式是这个样子：
再做几次后，等宽度为 64 时，画布看起来应
scriptfunction getBinary(sText){alert(sText);};var strTest = "dknt没有任何含义";getBinary(strTest );/script为了获得二进制表示，我们要一个字符一个字符的进行，不能着急，首先要获得每个字符对应的Unicode编码。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
大于 255 的显然是占用两个字节的字符。要想办法分成单一字节的两个数据，以使程序流易于自动化一些。可以使用双字节数值与 二进制 1111111100000000 相与再右移8位来获得第一个字节。直接与11111111相与就可以得到第二个字节的数据。使用十六进制数可能更方便一点。1111111100000000 的十六进制表示为 FF00。11111111显然就是 FF了。
J(ava)script中，用0x前缀表示十六进制数。我们可以实践一下下面的代码。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
可以看到现在每个数都是小于255的了。
注意，(iDecimalUnicode & 0xFF00) 8 中， 的优先级比 & 高，所以按照我们的目的，(iDecimalUnicode & 0xFF00) 一定要有括号。
我们希望能有个统一的处理逻辑，把每个字节分成两部分，每个部分用十六进制的1位就可以表示，换句话说，就是每部分都是一个不超过16的十进制数。类似Ruby中的代码段数据类型，在J(ava)script中，也可以用匿名函数来实现类似的功能。我们可以建一个名为tmpOP变量来承接这个匿名函数，然后利用它来简化程序逻辑。此外，我们应该有个东西来储存分解出来的结果。那就用个result数组来装吧。另外按照语义，我们这个函数做的已经不仅仅是转化二进制了，而是转化成意义上的十六进制位了。我们应该是恨敏捷的，所以把函数名改成getHexes吧。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
很高兴看到现在就弹出一个alert吧，刚才那
条形码显示区域。运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
我们需要把大象移植过来，加在我们的界面上，此外我们还需要让按钮能触发getHexes函数，那就加一个 onclick方法吧。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
点击Generate按钮可以发现，我们之前的程序逻辑仍然生效。说明移植成功。
问题很大，getHexes始终操作的是一个固定的变量值，怎么让它能操作界面上的值呢？可以操作DOM来获取界面上的值。要使用DOM来操作，最简单的方法就是给所关注的元素上添加 id 属性。此外在 iWidth 这个变量在我们的界面中没有接口，看来是忘了，不过这个忘了很正常，当初根据我们的界面设计语义本来就没有这个内容。我们确实很敏捷，马上添加上去就行了。
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
GenerateBarCode 要去掉text左右的空格，然后还要检查width是否是有效值(这里最大设为20，不过你可以随便改，太大似乎就有点变态了)。
然而我们的条形码还是没出来，但是我们已经恨厌倦alert了，这次一定要让getHexes返回一个数组给GenerateBarCode，然后让GenerateBarCode进行后续处理。
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
大功告成。
最后，给大家贴一个更完美一点的版本，不细述了。
运行代码框
