脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 →

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

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

然而我们的条形码还是没出来，但是我们已经恨厌倦alert了，这次一定要让getHexes返回一个数组给GenerateBarCode，然后让GenerateBarCode进行后续处理。

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

GenerateBarCode接到getHexes传过来的数组以后开始使用其中的十六进制位构造DIV小单元。其中，我们用 background-image 来指明背景文件的位置，正好我刚才上传了做好的gif文件，用gifURL保存它的位置。background-position-x表示背景图片水平方向偏移，我们用十六进制位（范围是0-15） X 8 (即gif小单元的像素宽度) 正好就可以让我们想要的gif小单元作为当前div的背景了。这就是我们的gif为什么要做成那样的原因。实际上，之所以要把所有的小单元放在一个图片里，主要是为了节省I/O调用的次数，提高效率。

GenerateBarCode中的for循环，终止条件是iWidth，以便让sText补足iWidth位时，也能显示出 iWidth 位来，因为数组空元素的默认值可以返回0。

我们给承接结果的div赋以id为BarCode_Field，将构造好的HTML片段放在这个div中，页面就可以呈现出条形码了。

然而似乎还是没看到条形码。那当然了，我们的gif背景透明色已经让页面的背景白色透过来了，白成一片了，当然看不着。我们得改一下Body的背景颜色。如下：

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

大功告成。
最后，给大家贴一个更完美一点的版本，不细述了。

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

其中修改了一些地方，以使得在Firefox也能显示。首先。Firefox只能识别标准的background-position属性，接受两个值，我们只要把第二个值设为0就可以了。
此外，SELECT对象添加option元素也有一点小区别。le.backgroundColor = aColors[i];
        f(oOption);
    }
    oSelect.selectedIndex = 7;
}

var gifURL = "/upload/200742411119165.gif";
var aColors = ['aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black','blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate','coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue','dimgray','dodgerblue','firebrick','floralwhite','forestgreen','Fuchsia','gainsboro','ghostwhite','gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred','indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen','lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta','maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy','oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff','peru','pink','plum','powderblue','purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen','seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen','steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat','white','whitesmoke','yellow','yellowgreen'];
</script>
</head>

<body style="background-color:#000000; color:white" onload="fillSelect()">
<div style="float:left;">
    <div style="float:left; width:170px; font-size:18px;line-height:25px; font-family:Arial">
        Text:<br />
        Width: <br />
        Height: <br />
        Background Color: 
    </div>
    <div style="float:left;">
        <input id="text" type="text" value="dknt没有任何含义" /><br /> 
        <input id="width" type="text" value="8"/><br />
        <input id="height" type="text" value="8"/><br />
        <SELECT id="color" style="width:100px"></SELECT></div>
    <div style="float:left;margin-left:20px">
        <input type="button" value="Generate" onclick="GenerateBarCode()"/></div>
</div>
<div id="BarCode_Field" style="float:left;margin-left:20px"></div>
</body>
[/html]
其中修改了一些地方，以使得在Firefox也能显示。首先。Firefox只能识别标准的background-position属性，接受两个值，我们只要把第二个值设为0就可以了。
此外，SELECT对象添加option元素也有一点小区别。
您可能感兴趣的文章:

相关文章

  • Openlayers实现面积测量的方法

    Openlayers实现面积测量的方法

    在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧
    2024-11-11
  • 小程序页面onload(),onready()加载顺序详解

    小程序页面onload(),onready()加载顺序详解

    本文主要介绍了小程序页面onload(),onready()加载顺序，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 利用fecha进行JS日期处理

    利用fecha进行JS日期处理

    这篇文章主要介绍的是如何利用fecha进行JS日期处理，在日常项目中，经常会碰到日期处理的需求，这种需求千奇百怪，而且往往经常变化。虽然js提供了原生的Date方法供我们选择，但一些复杂的日期时间处理起来往往力不从心。下面通过这篇文章来一起学习学习吧。
    2016-11-11
  • Kotlin学习第一步 kotlin语法特性

    Kotlin学习第一步 kotlin语法特性

    Kotlin学习第一步，从kotlin语法特性开始学习，包括变量定义、函数扩展、Parcelable序列化、编写工具类等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript 过滤关键字

    JavaScript 过滤关键字

    本文主要介绍了JavaScript过滤关键字的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 判断在css加载完毕后执行后续代码示例

    判断在css加载完毕后执行后续代码示例

    这篇文章主要介绍了在css加载完毕后执行后续代码的方法,需要的朋友可以参考下
    2014-09-09
  • JavaScript包装对象使用详解

    JavaScript包装对象使用详解

    javascript代码运行的过程中基本类型会找到对应的包装对象，然后包装对象把所有的属性和方法给了基本类型，然后包装对象被系统进行销毁，所以理解了包装对象可以很好的理解之前写的代码为什么可以这样做了。
    2015-07-07
  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），相信大家对ajax都很熟悉，下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • WebStorm中如何将自己的代码上传到github示例详解

    WebStorm中如何将自己的代码上传到github示例详解

    这篇文章主要介绍了WebStorm中如何将自己的代码上传到github,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • 使用JavaScript获取Request中参数的值方法

    使用JavaScript获取Request中参数的值方法

    下面小编就为大家带来一篇使用JavaScript获取Request中参数的值方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论