手把手教你做超酷的条形码效果第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 这个变量在我们的界面中没有接口，看来是忘了，不过这个忘了很正常，当初根据我们的界面设计语义本来就没有这个内容。我们确实很敏捷，马上添加上去就行了。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
注意，我们已经把<script /> 标签的
var strTest = "dknt没有任何含义";
var iWidth = 8;
两句去掉了。因为他们确实没有什么用了，我们已经不从那里获得数据了。
这回，如果你改动两个文本框中的文字，将会看到另外一组十六进制位。此外，我们觉得加一个对文本框的说明更好一些，所以就在前面加了个div.
现在我们发现似乎把一大串字符写在onlick里似乎有点不自然，如果将来逻辑更复杂了将很难维护，不如就单建个函数专门负责此事。它也可以包含更复杂的调度逻辑。此外，我们对两个文本框的类型没有验证，如果输入的不是我们想要的数据类型怎么办？所以还要加上判断逻辑。所以修改如下：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧2024-11-11
本文主要介绍了小程序页面onload(),onready()加载顺序，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍的是如何利用fecha进行JS日期处理，在日常项目中，经常会碰到日期处理的需求，这种需求千奇百怪，而且往往经常变化。虽然js提供了原生的Date方法供我们选择，但一些复杂的日期时间处理起来往往力不从心。下面通过这篇文章来一起学习学习吧。2016-11-11
Kotlin学习第一步，从kotlin语法特性开始学习，包括变量定义、函数扩展、Parcelable序列化、编写工具类等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
本文主要介绍了JavaScript过滤关键字的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了在css加载完毕后执行后续代码的方法,需要的朋友可以参考下2014-09-09
javascript代码运行的过程中基本类型会找到对应的包装对象，然后包装对象把所有的属性和方法给了基本类型，然后包装对象被系统进行销毁，所以理解了包装对象可以很好的理解之前写的代码为什么可以这样做了。2015-07-07
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），相信大家对ajax都很熟悉，下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
WebStorm中如何将自己的代码上传到github示例详解
这篇文章主要介绍了WebStorm中如何将自己的代码上传到github,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
下面小编就为大家带来一篇使用JavaScript获取Request中参数的值方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论