手把手教你做超酷的条形码效果第2/3页

更新时间：2007年04月24日 00:00:00 作者：

第三步，把冰箱门儿带上——封装和测试用例
接下来的工作重点就是要把条形码做出来。为了测试效果，我们还需要一个用户界面。
皮之不存，毛之焉附,首先做一个界面。随便做一个普通页面就行了。然后在上面安放一个文本框，一个触发按钮，一个条形码显示区域。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barcode Test Case</title>
</head>
<body>
<div style="float:left;">
<input type="text" /> <input type="button" value="Generate"/>
</div>
<div style="float:left;"></div>
</body>
</html>
我们需要把大象移植过来，加在我们的界面上，此外我们还需要让按钮能触发getHexes函数，那就加一个 onclick方法吧。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

点击Generate按钮可以发现，我们之前的程序逻辑仍然生效。说明移植成功。

问题很大，getHexes始终操作的是一个固定的变量值，怎么让它能操作界面上的值呢？可以操作DOM来获取界面上的值。要使用DOM来操作，最简单的方法就是给所关注的元素上添加 id 属性。此外在 iWidth 这个变量在我们的界面中没有接口，看来是忘了，不过这个忘了很正常，当初根据我们的界面设计语义本来就没有这个内容。我们确实很敏捷，马上添加上去就行了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Barcode Test Case</title> <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); }; </script> </head> <body> <div style="float:left;">     <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial">         Text:         Width:      </div>     <div style="float:left;">         <input id="text" type="text" value="dknt没有任何含义" />          <input id="width" type="text" value="8"/></div>     <div style="float:left;margin-left:20px">         <input type="button" value="Generate" onclick="getHexes(document.getElementById('text').value, parseInt( document.getElementById ('width').value) )"/></div> </div> <div style="float:left;"></div> </body>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

注意，我们已经把<script /> 标签的
var strTest = "dknt没有任何含义";
var iWidth = 8;
两句去掉了。因为他们确实没有什么用了，我们已经不从那里获得数据了。
这回，如果你改动两个文本框中的文字，将会看到另外一组十六进制位。此外，我们觉得加一个对文本框的说明更好一些，所以就在前面加了个div.
现在我们发现似乎把一大串字符写在onlick里似乎有点不自然，如果将来逻辑更复杂了将很难维护，不如就单建个函数专门负责此事。它也可以包含更复杂的调度逻辑。此外，我们对两个文本框的类型没有验证，如果输入的不是我们想要的数据类型怎么办？所以还要加上判断逻辑。所以修改如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Barcode Test Case</title>  <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);  };  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>  </head>  <body>  <div style="float:left;">      <div style="float:left; width:70px; font-size:18px;line-height:25px; font-family:Arial">          Text:          Width:       </div>      <div style="float:left;">          <input id="text" type="text" value="dknt没有任何含义" />           <input id="width" type="text" value="8"/></div>      <div style="float:left;margin-left:20px">          <input type="button" value="Generate" onclick="GenerateBarCode()"/></div>  </div>  <div style="float:left;"></div>  </body>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

GenerateBarCode 要去掉text左右的空格，然后还要检查width是否是有效值(这里最大设为20，不过你可以随便改，太大似乎就有点变态了)。

您可能感兴趣的文章:

手把手教你做超酷的条形码效果

js模拟支付宝密码输入框
这篇文章主要为大家详细介绍了js模拟支付宝密码输入框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
JavaScript用二分法查找数据的实例代码
本篇文章主要介绍了JavaScript用二分法查找数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
javascript小组件原生table排序表格脚本(兼容ie firefox opera chrome)
javascript小组件原生table排序表格脚本兼容ie firefox opera chrome,需要的朋友可以参考下
2012-07-07
Bootstrap实现省市区三级联动(亲测可用)
这篇文章主要为大家详细介绍了Bootstrap实现省市区三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
KnockoutJS 3.X API 第四章之表单value绑定
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单value绑定的相关资料,需要的朋友可以参考下
2016-10-10
JavaScript设计模式之命令模式
这篇文章主要介绍了JavaScript设计模式之命令模式，命令设计模式是由发令者、执行者、命令对象三部分构成，文章由此展开详细的内容介绍，需要的小伙伴可以参考一下
2022-06-06
javascript操作select参考代码
用js控制select的方法，大家可以参考下
2008-06-06
JS简单判断函数是否存在的方法
这篇文章主要介绍了JS简单判断函数是否存在的方法,涉及javascript函数运行与类型判定相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2017-02-02
ES6学习教程之模板字符串详解
大家都知道在ES6中引进的一种新型的字符串字面量语法-模板字符串，下面这篇文章主要给大家介绍了关于ES6学习教程之模板字符串的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-10-10
JS字符串处理实例代码
这篇文章介绍了JS字符串处理实例代码,有需要的朋友可以参考一下
2013-08-08