Teach you how to create a cool bar code

Teach you how to make awesome bar code effect statement:
1. This article teaches you how to implement the bar code on the web page, reflecting the idea of using the web page production technology to comprehensively solve the problem. It aims to consolidate the entry level for HTML, JavaScript, and PhotoShop users.
2. If you have any questions, please wait. Thank you very much.
3. Master is free of entry.

How many steps can I create a barcode?
Step 1: open the refrigerator door-use PhotoShop to draw small images

We need to create a bar code image containing 16 elements.

First, open Photoshop. This tutorial uses the Simplified Chinese version of CS. The operations are similar only in terms of this tutorial. If you read them carefully, you should not encounter any problems.

• After opening, press Ctrl + N to create an 8-pixel X 8-pixel image, and select transparent background ,:
  
  

• The method is the same, but the scheme of this mode transformation is to apply the black between the adjacent two white colors to the white. For example, for the fifth expansion, the pattern is like this:
  

  Script function getBinary (sText) {alert (sText) ;}; var strTest = "dknt has no meaning"; getBinary (strTest); script

  Tip: you can modify some code before running
  In order to obtain the binary representation, we need one character and one character. Don't worry. First, we need to obtain the Unicode encoding corresponding to each character.
  

  Script function getBinary (sText) {for (var I = 0; I <sText. length; I ++) {alert (sText. charCodeAt (I) ;}}; var strTest = "dknt has no meaning"; getBinary (strTest); script

  The value greater than 255 is a string of two bytes. It is necessary to divide the data into two bytes so that the program flow is easier to automate. You can use the double byte value and the binary 1111111100000000 and then shift the value to the right to obtain the first byte. The second byte of data can be obtained directly in the phase of 11111111. It is easier to use hexadecimal numbers. The hexadecimal 1111111100000000 format is FF00. 11111111 is obviously FF.
  In J (ava) script, the prefix 0x is used to represent the hexadecimal number. We can practice the following code.
  

  Script function getBinary (sText) {for (var I = 0; I <sText. length; I ++) {var iDecimalUnicode = sText. charCodeAt (I); if (iDecimalUnicode> 255) {alert (iDecimalUnicode & 0xFF00)> 8); alert (iDecimalUnicode & 0xFF );} else {alert (iDecimalUnicode) ;}}; var strTest = "dknt has no meaning"; getBinary (strTest); script

  We can see that each number is smaller than 255.
  Note: (iDecimalUnicode & 0xFF00)> 8,> Priority Ratio & height, so according to our purpose, (iDecimalUnicode & 0xFF00) must have parentheses.
  We hope to have a unified processing logic. Each byte is divided into two parts. Each part can be expressed in hexadecimal 1 bits. In other words, that is, each part is a decimal number up to 16. Similar to the code segment data type in Ruby, similar functions can be implemented using anonymous functions in J (ava) script. We can create a variable named tmpOP to undertake this anonymous function and use it to simplify the program logic. In addition, we should have something to store the decomposed results. Use a result array. In addition, according to the semantics, what we do with this function is not just to convert binary, but to a hexadecimal bit in the sense. We should hate agility, so change the function name to getHexes.
  

  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

  I'm glad to see an alert popped up now. It is very disturbing to see so many alert events just now. I'm sorry. This time, alert is used as an array, which is neat.
  Now we can see that every element in the array is smaller than 16. That's good. The elephant is almost packed in.
  
  One problem is that we cannot convert every character in a string into a bar code. What if it is an article with more than 10 thousand characters. Therefore, we need to limit the number of characters to be processed. From the bar code point of view, it seems that the width should be fixed, that is, the length of the aResult array we use should be fixed. You can control it in our tmpOP. We can assume that we only need eight hexadecimal bits to generate the barcode. You can add an iMaxLength parameter to getHexes.
  As follows:
  

  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

  Now there are only eight smaller than 16.
  
  In tmpOP, if the length of the aResult array exceeds the maximum value, a 0 is returned. After the 0 is found outside, the loop is exited directly because there is no need to continue to take down the characters.
  
  Some places are slightly inappropriate. In the spirit of perfection, we need to improve our program efficiency. First, we know the phase and purpose, so we can write some code that can be processed directly, because when we process dual bytes, In order to divide them into two single bytes, in fact, the operation is performed once, and there is a repeating phase with the next decomposition of the hexadecimal bit. To put it bluntly, it is useless to do more things. It is better to break down four hexadecimal bits at a time.
  
  In addition, we always ask the length attribute of the array to know the length of the array. It is very tiring to know the length of the array. We also have the conditions to know why.
  
  Based on these two points, we change the program as follows:
  

  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

  When we see that the effect is the same as that of the other one, it means we have not corrected the problem. The aPos array can store the mask, and the index X 4 of the array is the number of digits that need to be shifted to the right. TmpOP (iDecimalUnicode, I) indicates that iDecimalUnicode is taken from the I hexadecimal number of the right (0th is the 1 hexadecimal number of the rightmost ).
  
  The elephant was filled with a powerful plug-in. Next we will take the Active Cable and bring the refrigerator door. How can we end this problem if the barcode hasn't appeared yet?
  
  Step 3: Bring the refrigerator door-encapsulation and Test Cases
  The focus of the next step is to create a bar code. To test the effect, we also need a user interface.
  You can create an interface first. Just create a normal page. Then place a text box, a trigger button, and a bar code display area on the top.
  

     
      Barcode Test Case   
         
   
    

  We need to transplant the elephant and add it to our interface. In addition, we also need to enable the button to trigger the getHexes function. Add an onclick method.
  

     
      Barcode Test CaseScript 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; script  
         
   
    

  Click Generate to find that our previous program logic still takes effect. Indicates that the port is successfully transplanted.
  
  The big problem is that getHexes always operates on a fixed variable value. How can we make it operate on the value on the interface? You can operate the DOM to obtain the value on the interface. To use DOM for operations, the simplest way is to add the id attribute to the element of interest. In addition, the iWidth variable does not have an interface on our interface. It seems that I forgot it, but it is normal that I did not have this content at the beginning according to the design semantics of our interface. We are really agile. Just add it right away.
  

     
      Barcode Test CaseScript 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) ;}; script  
       
  Text: Width:
       
                     
       
           
   
   
   

  Note:Label
  Var strTest = "dknt has no meaning ";
  Var iWidth = 8;
  The two sentences are removed. Because they are useless, we don't get data from it anymore.
  This time, if you change the text in two text boxes, you will see another group of hexadecimal digits. In addition, we think it is better to add a text box, so we add a p.
  It seems a little unnatural to write a large string of characters in onlick. If the logic is more complicated in the future, it will be difficult to maintain it. It is better to create a single function to take charge of this matter. It can also contain more complex scheduling logic. In addition, we have not verified the types of the two text boxes. What if the input is not the data type we want? Therefore, the judgment logic must be added. So the modification is as follows:
  

        
       Barcode Test CaseScript 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) ;}; function GenerateBarCode () {var sText = document. getElementById ('text '). value, iWidth = parseInt (document. getElementById ('width '). value); sText = sText. replace (/(^ \ s + | \ s + $)/ig, ''); iWidth = iWidth | 0; if (iWidth> 20 | iWidth <0) return false; if (sText. length <iWidth) return false; getHexes (sText, iWidth)} script    
        
  Text: Width:
        
                       
        
            
    
    
    

  In GenerateBarCode, remove spaces around text, and check whether the width is a valid value (the maximum value is 20 here, but you can change it as needed. It seems a little abnormal if it is too big ).
  
  However, our bar code still does not come out, but we hate alert. This time, we must let getHexes return an array to GenerateBarCode, and then let GenerateBarCode perform subsequent processing.
  

  Barcode Test CaseScript 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 ;}return aResult ;}; function GenerateBarCode () {var sText = document. getElementById ('text '). value, iWidth = parseInt (document. getElementById ('width '). value); sText = sText. replace (/(^ \ s + | \ s + $)/ig, ''); iWidth = iWidth | 0; if (iWidth> 20 | iWidth <1) return false; var aHexes = getHexes (sText, iWidth), sDivString = ''; for (var I = 0; I <iWidth; I ++) {sDivString + ="
  "} Document. getElementById ('barcode _ field'). innerHTML = sDivString;} var gifURL ="/upload/200742411119165.gif"; script  
       
  Text: Width:
       
                     
       
           
   
   
   

  After receiving the array passed by getHexes, GenerateBarCode starts to use the hexadecimal bits to construct the DIV small unit. Here, we use background-image to specify the location of the background file. I uploaded a completed gif file and saved it with gifURL. Background-position-x indicates the horizontal offset of the background image. We use hexadecimal bits (range: 0-15) X 8 (that is, the pixel width of a gif cell) the gif cell we want can be used as the background of the current p. That's why our gif is like that. In fact, we need to put all the small units in one image to save the number of I/O calls and improve the efficiency.
  
  In the for Loop in GenerateBarCode, the termination condition is iWidth, so that when sText complements the iWidth bit, the iWidth bit can also be displayed, because the default value of an empty array element can return 0.
  
  We assign the id of p to the acceptance result as BarCode_Field, and place the constructed HTML segment in this p, so that the page can display a bar code.
  
  However, the bar code still does not appear. Of course, the transparent background color of our gif has made the background of the page white and white. Of course we can't see it. We need to change the background color of the Body. As follows:

     
      Barcode Test CaseScript 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 ;}return aResult ;}; function GenerateBarCode () {var sText = document. getElementById ('text '). value, iWidth = parseInt (document. getElementById ('width '). value); sText = sText. replace (/(^ \ s + | \ s + $)/ig, ''); iWidth = iWidth | 0; if (iWidth> 20 | iWidth <1) return false; var aHexes = getHexes (sText, iWidth), sDivString = ''; for (var I = 0; I <iWidth; I ++) {sDivString + ="
  "} Document. getElementById ('barcode _ field'). innerHTML = sDivString;} var gifURL ="/upload/200742411119165.gif"; script  
       
  Text: Width:
       
                     
       
           
   
   
   

  Success.