Teach you how to do cool bar code effect 1th/3 page _javascript Tips

original works, reprint please indicate the source by Dknt from Bbs.blueidea.com
Statement:
1. This article teaches you to implement the barcode effect on the Web page, which embodies the idea of using Web page making technology to solve the problem comprehensively. Aimed at consolidating entry-level levels for people with an entry-level level of HTML, Javascript,photoshop.
2. If there is a problem can not reply in a timely manner, please magnanimous, we would appreciate it.
3. The master is exempt from entering.

What is the total number of steps to make a barcode?
first step, open the fridge--use Photoshop to draw a small picture

We need to create a barcode picture that contains 16 elements.

First open Photoshop, this tutorial is used in the CS Simplified Chinese version, only in the context of this tutorial, the operation is similar, as long as serious reading, should not encounter problems.

• After opening, first press CTRL + N to build a 8-pixel X 8-pixel picture with the background selected transparently, as shown in the figure:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• In order to see clearly, you can zoom the picture to a maximum of 1600%.
  
• Click D, and then click X to make sure the foreground color is white and the background color is black.
  
• Using Ctrl+delele, fill the background color, black.
  
• Using the pencil-pen tool, the parameters are set as follows
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Depict lines, draw one from another. This effect is painted as follows:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Drag layer 1 to the new button below to copy
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Select the layer 1 copy to paint the first white on the left with a pencil tool to black (you can press X to turn the foreground color black). As shown in the following illustration:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Select Layer 1, press CTRL + A, press CTRL + C, and then select the menu command image = Canvas size, adjust the width to 16 pixels, and the small block positioned in the middle of the point, as shown in the following illustration:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Select Layer 1 copy. Hold down the CTRL key and left-click the Layer 1 copy entry on the Layers panel to select the selection for the Layer 1 replica. Press CTRL + Shift + I to deselect (this series can also be manipulated with magic wand, select the transparent part). Press CTRL + V to paste into Layer 2.
  
• Turn off the visibility of the layers 1 and 1 replicas (left-click on the Small eye icon), select Layer 2, and paint a black with the second White Pencil tool on the left. As shown in the following illustration:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Open the visibility of the Layer 1 replica, make sure Layer 2 is selected, and press CTRL + E to merge down.
  
• Open the visibility of layer 1, hold down the CTRL key, and click the layer 1 on the Layers panel to select the Layer 1 selection. Copy and enlarge the canvas and continue drawing as described above. Do two more times when the width is 24,32, and paint the third and fourth white of Layer 1 mode (pattern) black. The final results are shown in the following illustration:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' border=0 resized= "true" >
  
• The next step needs to be widened, the same way, except that the pattern transformation scheme is to paint the black between the adjacent two white to white. For example, the fifth expansion, the pattern is this way:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• After a few more, when the width is 64 o'clock, the canvas should look like this:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Next still need to broaden, the idea is to delete the adjacent two white Stripes (note, you can think of the 4th and the first one is adjacent), and then do 4 times the effect is this:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Still 32 pixels to complete, but also need to widen, this time is filled with two adjacent black bar for the white bar, the final effect is as follows:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• Layer 1 can not, delete it.
  
• Next we want to remove the black part and make it transparent. Using the Magic Wand tool, set the options as follows:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  When selected, pressing the DELETE key deletes the entire canvas into the following form:
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  Seems to be a mess, is the PS to the transparent background of the problem, as long as the steps to ensure that the effect on the line.
  
• Select File-Save As, type selected as GIF, can be called Barcode.gif, in the following dialog box, the transparency of this item must be selected. Find a suitable place to put it.
  screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>
  
• So the refrigerator door opened, if you do not like this, use me to do a good job, so that the elephant can not be installed.

Step Two, pack the elephants in--code analysis
Our goal is to convert a string into a barcode to display on the page. So how does a string correspond to a barcode? What the hell is a 128x8 picture?

We can consider the most basic storage unit of data in memory-byte (byte) is eight bits (bit). A 8-bit binary number can be represented by a hexadecimal number of 2 digits, expressed as 00-ff. Just mentioned a 16, did you notice?

How do you convert a string to a byte representation? Does not seem to be directly represented, but the string in the J (Ava) script has a charCodeAt () method. We know that a single byte, if it's an integer, has a range of 0-255, two bytes if the table

The positive integer, the range is 0-65535. The charCodeAt () method returns a Unicode representation of a character, in which the Chinese language is two bytes, and English is a byte. So for an English character it always returns a positive integer between 0-255, and for a Chinese character, it always returns a positive integer (not an exact range) between 255-65535.

Again, the knowledge of bit arithmetic, excerpt from Microsoft's JScript Scripting reference manual:

• For and operations. The & operator looks at the value of the binary representation of two expressions and performs a bitwise AND action. The results of this operation are as follows:
  
  0101 (expression1)
  1100 (expression2)
  ----
  0100 (Result)
  At any time, as long as two expressions have a bit of 1, the result is 1. Otherwise, the bit of the result is 0.
  
• For shift operations, such as the right shift operation. The,>> operator in expression1 >> expression2 shifts all bits of expression1 to the right expression2 the specified number of digits. The expression1 symbol bit is used to populate the left-empty bit after the right shift. The bit that is moved to the right is discarded. For example, after the following code is evaluated, the value of temp is -4:-14 (that is, binary 11110010) right-shift two-bit equals 4 (that is, binary 11111100).
  

var temp
temp = -14 >> 2
Note: 32-bit integer type of data has a sign bit problem, for negative numbers, padding bit is 1, positive number is 0. The number we get from the charCodeAt () is positive, so don't worry about the problem.
For a 8-bit binary number, and the binary 11110000 phase, and then the right 4-bit, you can get its leftmost four digits.
Directly with the 1111 phase, you can get his right four bits.
Prepare the knowledge to know so much enough, below let me begin to practice coding.
Say, to have a string, so there is a string.
var strtest = "Dknt has no meaning";
We're just going to convert this string into a barcode.
We're going to get its binary representation, so we'll build a function to get its binary representation. such as Getbinary ();
Such as

<script> function Getbinary (stext) {alert (stext); }; var strtest = "Dknt has no meaning"; Getbinary (strtest); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Tip: You can modify some of the code before running
In order to get binary representations, we want a character to be carried out in one character, not to be anxious, first to obtain the corresponding Unicode encoding for each character.

<script> function Getbinary (stext) {for (var i = 0; i < stext.length; i++) {alert (Stext.charcodea T (i)); } }; var strtest = "Dknt has no meaning"; Getbinary (strtest); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

A character that is greater than 255 is clearly occupied by two bytes. Find ways to divide two data into a single byte to make the program flow easier to automate. The first byte can be obtained by using a Double-byte value with binary 1111111100000000 phase and then a 8-bit right shift. A second byte of data can be obtained directly from the 11111111 phase. It may be more convenient to use hexadecimal numbers. The hexadecimal representation of 1111111100000000 is FF00. 11111111 is obviously ff.
In the J (AVA) script, the hexadecimal number is represented by a 0x prefix. We can practice the following code.

<script> function Getbinary (stext) {for (var i = 0; i < stext.length; i++) {var idecimalunicode =s Text.charcodeat (i); if (Idecimalunicode > 255) {alert (Idecimalunicode & 0xff00) >> 8); Alert (Idecimalunicode & 0xFF); }else{alert (Idecimalunicode); } } }; var strtest = "Dknt has no meaning"; Getbinary (strtest); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

You can see now that each number is less than 255.
Note that the priority of,>> (Idecimalunicode & 0xff00) >> 8 is higher than &, so for our purposes, (Idecimalunicode & 0xff00) must have parentheses.
We want to have a unified processing logic that divides each byte into two parts, each of which can be represented by hexadecimal 1 digits, in other words, each part is a decimal number that is no more than 16. Similar to the code snippet data type in Ruby, you can use anonymous functions in the J (Ava) script to do similar functions. We can build a variable named Tmpop to take this anonymous function and then use it to simplify the program logic. In addition, we should have something to store the decomposed results. Then use a result array to install it. In addition, by semantics, our function does not just transform the binary, but translates it into a hexadecimal bit of meaning. We should be hate agile, so change the function name to Gethexes bar.

<script> function Gethexes (stext) {var aresult = []; var tmpop = function (ibyte) {Aresult.push (Ibyte & 0xF0) >> 4); Aresult.push (Ibyte & 0xF); }; for (var i = 0; i < stext.length i++) {var idecimalunicode =stext.charcodeat (i); if (Idecimalunicode > 255) {tmpop (Idecimalunicode & 0xff00) >> 8); Tmpop (Idecimalunicode & 0xFF); }else{Tmpop (Idecimalunicode); } alert (Aresult); }; var strtest = "Dknt has no meaning"; Gethexes (strtest); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

I'm glad to see that there's an alert right now, so many alert is just annoying. I'm sorry. This time because we used an array of alert, we felt a little bit more neat.

Now we find that each element of the array is less than 16, well, the elephant is going to fit in.

There is a problem, we can not convert each character of the string into a barcode, if a 10,000-word article how to do, that does not pull it. So we're going to limit the number of characters processed. In the bar code perspective, it seems that the width should be fixed, that is, the length of our corresponding Aresult array should be fixed. That's fine, just control it in our tmpop. We can assume that we only need 8 hexadecimal bits to generate barcodes. You can add a imaxlength parameter to the gethexes to control it.
As follows:

<textarea id="runcode33330"><script> function gethexes (stext, imaxlength) {var aresult = []; var tmpop = function (ibyte) {Aresult.push (Ibyte & 0xF0) >> 4); if (Aresult.length > Imaxlength) return 0; Aresult.push (Ibyte & 0xF); if (Aresult.length > Imaxlength) return 0; return 1; }; for (var i = 0; i < stext.length i++) {var idecimalunicode =stext.charcodeat (i); if (Idecimalunicode > 255) {if (!tmpop (Idecimalunicode & 0xff00) >> 8)) break;; if (!tmpop (Idecimalunicode & 0xFF)) break; }else{if (!tmpop (Idecimalunicode)) break; } alert (Aresult); }; var strtest = "Dknt has no meaning"; var iwidth = 8; Gethexes (Strtest, iwidth); </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Now it's true that there are only 8 numbers less than 16.

In Tmpop, we find that the length of the Aresult array exceeds the maximum, and then returns a 0, which after discovering this 0, exits the loop directly, because there is no need to continue to go down the characters.

Some places are slightly wrong, in the spirit of excellence, we have to improve the efficiency of our procedures. First of all, we know the purpose of bit phase and we can write some more straightforward code, because when we handle double-byte, in order to divide into two single-byte, we actually have more than one operation, and there is a duplicate bit phase in the following decomposition double hexadecimal bit. To say vulgar is to do a lot of useless things. Instead of splitting out 4 hexadecimal digits at a time.

In addition, we always ask the length property to the array to learn about the size of the array, to know that the array does this thing is very tired, anyway, we also have the conditions of their own psychological number, why do we always ask it?

Based on these two points, we have changed the following procedures:

<textarea id= "runcode15576" > <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 has no meaning"; var iwidth = 8; Gethexes (Strtest, iwidth); </script> </textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

See the effect is the same as the previous one, indicating that we have not changed the wrong. Where the apos array can store the mask, and the index X 4 of the array is the number of digits that need to be moved to the right. Tmpop (Idecimalunicode, i) represents the Idecimalunicode from the right of the first hexadecimal bit (the No. 0 is the rightmost 1 hexadecimal digits).

The elephant is barely tucked in, and we're going to do a quick job and take the fridge. How do we end the bar code before it shows up?

Current 1/3 page 123 Next read the full text