第二步，把大象装进去——代码分析

我们的目标是把一个字符串转化为一个条形码显示在页面上。那么一个字符串如何对应出一个条形码呢？上面做个128X8的图片到底是要扯什么蛋？

我们可以考虑数据在存储器中的最基本储存单位——字节(byte) 一个字节是八位(bit)。一个8位二进制数可以通过一个2位的十六进制数表示，表示为 00 - FF。刚才提到了一个16，注意到了吗？

如何把一个字符串转换成字节表示呢？似乎不能直接表示，但是J(ava)script 中的字符串有一个charCodeAt()方法。我们知道单字节若表示整数，其范围是 0 -255，双字节若表

示正整数，范围是 0 - 65535。charCodeAt()方法返回的是一个字符的Unicode表示，这种Unicode方案中，中文是两个字节的，英文是一个字节的。所以对于一个英文字符它总是返回0 - 255 之间的正整数，对于一个中文字符，它总是返回 255 - 65535 之间的正整数（非精确范围）。

再讲一下位运算的知识吧，节选自微软的Jscript脚本参考手册：

对于与运算。 &运算符查看两个表达式的二进制表示法的值，并执行按位“与”操作。该操作的结果如下所示：
0101   (expression1)
1100   (expression2)
----
0100   (result)
任何时候，只要两个表达式的某位都为 1，则结果的该位为 1。否则，结果的该位为 0。

对于移位运算，比如右移运算。expression1 >> expression2 中，>> 运算符 把 expression1 的所有位向右移 expression2 指定的位数。expression1 的符号位被用来填充右移后左边空出来的位。向右移出的位被丢弃。例如，下面的代码被求值后，temp 的值是 -4：-14 （即二进制的 11110010）右移两位等于 -4 （即二进制的 11111100）。
var temp
temp = -14 >> 2注：32位整数类型的数据有符号位的问题，对于负数，填充位为1，正数为0。我们通过charCodeAt()得到的数都是正数，所以不用管这个问题。

对于一个8位二进制数，与二进制 11110000 相与，再右移4位，则可以得到它的最左四位。
直接与 1111 相与，则可以得到他的右边四位。

准备知识了解这么多够了，下面让我开始实践编码。

说，要有一个字符串，于是就有了个字符串。
var strTest = "dknt没有任何含义";
我们就是要把这个字符串转化为一个条形码。

我们要获得它的二进制表示，那我们就建一个函数来获得它的二进制表示。比如 getBinary();
如：
运行代码框
<script> function getBinary(sText){ alert(sText); }; var strTest = "dknt没有任何含义"; getBinary(strTest ); </script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

为了获得二进制表示，我们要一个字符一个字符的进行，不能着急，首先要获得每个字符对应的Unicode编码。
运行代码框
<script> function getBinary(sText){ for(var i = 0; i < sText.length; i++){ alert( sText.charCodeAt( i ) ); } }; var strTest = "dknt没有任何含义"; getBinary(strTest ); </script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

大于 255 的显然是占用两个字节的字符。要想办法分成单一字节的两个数据，以使程序流易于自动化一些。可以使用双字节数值与 二进制 1111111100000000 相与再右移8位来获得第一个字节。直接与11111111相与就可以得到第二个字节的数据。使用十六进制数可能更方便一点。1111111100000000 的十六进制表示为 FF00。11111111显然就是 FF了。

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

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

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