快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际官方app下载安卓版_酒文化网进入



声明:

这篇文章教你在web页面上实现条形码效果,表现的是使用网页制作技巧综合办理问题的思路。旨在使对HTML, JavaScript,PhotoShop具有入门级水平的人巩固入门级水平。

若有问题不能及时回覆,麻烦请担待,不胜感激。

高手免进。

制作条形码统共分几步?

第一步,把冰箱门儿打开——应用PhotoShop绘制小图片

我们必要制作出一个含有16个元素的条形码图片。

首先打开Photoshop,本篇教程中应用的是CS 简体中文 版本,仅就本教程所涉及的方面来看,操作都大年夜同小异,只要卖力涉猎,应该不会碰到问题。

打开今后首先按CtrlN,建一个 8像素 X 8像素的图片,背景选择透明,如图所示:

为了看清楚,可以把图片缩放到最大年夜 1600%。

按一下D,再按一下X,确保前景致为白色背景致为玄色。

应用Ctrl Delele,添补背景致,玄色。

应用铅笔笔对象,参数做如下设置:

形貌线条,隔一列画一个。画成下面这种效果:

将图层1拖动到下面的新建按钮上复制一下:

选择 图层1 副本,将左边第一道白色用铅笔对象涂成玄色(可以按 X 将前景致变成玄色)。如下图所示:

选择 图层1 ,按Ctrl A,再按 CtrlC,然后选择菜单敕令图像=画布大年夜小, 将宽度调剂为16个像素,点中 定位 的最左边中心的小块,如下图所示:

选择 图层1 副本。按住Ctrl键,左键单击图层面板上的 图层1 副本 条款以选择 图层1 副本 的选区。按CtrlShiftI 反选(这一系列也可以用魔术棒操作,选择透明部分就可以了)。按CtrlV 粘贴成 图层2。

关闭 图层1 和 图层1 副本 的可见性(左键点击小眼睛图标),选择图层2,将左边第二道白色用铅笔对象涂成玄色。如下图所示:

打开 图层1副本 的可见性,确保选择伟德国际官方app下载安卓版了图层2,按CtrlE 向下合并。

打开 图层1 的可见性,按住Ctrl键,左键单击图层面板上的 图层1 条款以选择 图层1 的选区。复制并扩大年夜画布,按前面所述的措施继承绘制。在宽度为24,32的时刻再做两次,分手把 图层1 模式(pattern)的第三和第四条白色涂成玄色。着末的结果如下图所示:

接下来还必要拓宽,措施是一样的,只不过此次的模式变换的规划是把相邻两个白色之间的玄色涂成白色。比如第五次拓展,其模式是这个样子:

再做几回后,等宽度为 64 时,画布看起来应该是这个样子的:

接下来仍旧必要拓宽,思惟是删掉落相邻两个白色条(留意,可以觉得第4个白条和第一个白条是相邻的),于是再做4次的效果是这样的:

还差32个像素就完成了,还需再拓宽,此次是添补两个相邻玄色条为白色条,着末效果如下:

图层1 可以不要了,删掉落即可。

接下来我们要去掉落玄色的部分,使其透明。应用魔棒对象,将选项做如下设置:

选择今后,按delete键删除,则全部画布变成如下形式:

彷佛紊乱无章,是PS对透明背景表达的问题,只要包管步骤对了,做成这个效果就行了。

大年夜功告成选择文件 -- 另存为,类型选择为 gif, 可以起名叫 barcode.gif,鄙人下面的对话框中,透明这一项必然要选中。 找个相宜的地方放好。

于是冰箱门打开了,假如你做出的不是这个样子,用我这个做好的就行了,免得大年夜象装不进去。

第二步,把大年夜象装进去——代码阐发

我们的目标是把一个字符串转化为一个条形码显示在页面上。那么一个字符串若何对应出一个条形码呢?上面做个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 = "dk伟德国际官方app下载安卓版nt没有任何含义";

我们便是要把这个字符串转化为一个条形码。

我们要得到它的二进制表示,那我们就建一个函数来得到它的二进制表示。比如 getBinary();

如:

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

为了得到二进制表示,我们要一个字符一个字符的进行,不能发急,首先要得到每个字符对应的Unicode编码。

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

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

J(ava)script中,用0x前缀表示十六进制数。我们可以实践一下下面的代码。

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

可以看到现在每个数都是小于255的了。

留意,(iDecimalUnicode & 0xFF00) >> 8 中,>> 的优先级比 & 高,以是按照我们的目的,(iDecimalUnicode & 0xFF00) 必然要有括号。

我们盼望能有个统一的处置惩罚逻辑,把每个字节分成两部分,每个部分用十六进制的1位就可以伟德国际官方app下载安卓版表示,换句话说,便是每部分都是一个不跨越16的十进制数。类似Ru伟德国际官方app下载安卓版by中的代码段数据类型,在J(ava)script中,也可以用匿名函数来实现类似的功能。我们可以建一个名为tmpOP变量来承接这个匿名函数,然后使用它来简化法度榜样逻辑。此外,我们应该有个器械来储存分化出来的结果。那就用个result数组来装吧。别的按照语义,我们这个函数做的已经不仅仅是转化二进制了,而是转化成意义上的十六进制位了。我们应该是恨敏捷的,以是把函数名改成getHexes吧。

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

很痛快看到现在就弹出一个alert吧,刚才那么多alert是很闹心。我很歉仄。此次由于我们应用了alert一个数组,感到划逐一点。

现在发明数组的每一个元素都是小于16了吧,很好,大年夜象快装进去了。

有一个问题,我们不能把字符串的每个字符都转化成条形码,若是一个1万多字的文章怎么办,那不扯呢吗。以是我们要限定一下处置惩罚的字符数。以条形码的视点来看,彷佛宽度应该是固定的,也便是说我们用以对应的 aResult 数组的长度应该是固定的。那也好办,在我们的 tmpOP 里节制一下就行了。我们可以假设我们只必要8个十六进制位来天生条形码。可以在getHexes里加一个 iMaxLength 参数来节制。

如下:

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

现在确凿只有8个小于16的数了。

在 tmpOP 中,发明 aResult 数组的长度跨越最大年夜值,就返回一个0,外貌发明这个0今后,就直接退出轮回,由于没有需要再继承往下取字符了。

有些地方略显不当,本着千锤百炼的精神,我们要把我们的法度榜样效率前进前进。首先,我们知道了位相与的目的,就可以写一些更直接处置惩罚的代码,由于我们把处置惩罚双字节时,为了分成两个单字节,实际上多与运算了一次,和后面的分化双十六进制位有重复的位相与。说俗了便是多干了一次没用的事。不如一次就分化出4个十六进制位。

此外,我们老是向数组扣问length属性来获知数组长度,要知道数组做这件事是很累的,反正我们也有前提自己生理稀有,为什么还要总问它呢。

基于这两点,我们把法度榜样篡改如下:

运行代码框

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

看到了效果跟上一个是一样的,阐明我们没改错。此中,aPos数组就可以储存掩码,数组的索引 X 4 便是必要右移的位数。tmpOP( iDecimalUnicode , i) 就表示取 iDecimalUnicode 从右边数第i个十六进制位(第0个便是最右边的1个十六进制位)。

大年夜象是勉勉强强塞进去了,下面我们就把活做的利索点,把冰箱门儿带上。要不条形码还没露面,我们怎么结束?

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

接下来的事情重点便是要把条形码做出来。为了测试效果,我们还必要一个用户界面。

皮之不存,毛之焉附,首先做一个界面。随便做一个通俗页面就行了。然后在上面安顿一个文本框,一个触发按钮,一个条伟德国际官方app下载安卓版形码显示区域。

运行代码框

Text:

Width:

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

留意,我们已经把 标签的

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

var iWidth = 8;

两句去掉落了。由于他们确凿没有什么用了,我们已经不从那里得到数据了。

这回,假如你篡改两个文本框中的翰墨,将会看到别的一组十六进制位。此外,我们感觉加一个对文本框的阐明更好一些,以是就在前面加了个div.

现在我们发明彷佛把一大年夜串字符写在onlick里彷佛有点不自然,假如将来逻辑更繁杂了将很难掩护,不如就单建个函数专门认真此事。它也可以包孕更繁杂的调整逻辑。此外,我们对两个文本框的类型没有验证,假如输入的不是我们想要的数据类型怎么办?以是还要加上判断逻辑。以是改动如下:

运行代码框

Text:

Width:

Height:

Background Color:

[Ctrl A 整个选择 提示:你可先改动部分代码,再按运行]

此中改动了一些地方,以使得在Firefox也能显示。首先。Firefox只能识别标准的background-position属性,吸收两个值,我们只要把第二个值设为0就可以了。

此外,SELECT工具添加option元素也有一点小差别。

雨枫技巧教程网

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: