页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容手把手教你做超酷的条形码效果

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

发布：dxy 字体：[增加减小] 类型：转载

第三步，把冰箱门儿带上——封装和测试用例
接下来的工作重点就是要把条形码做出来。为了测试效果，我们还需要一个用户界面。
皮之不存，毛之焉附,首先做一个界面。随便做一个普通页面就行了。然后在上面安放一个文本框，一个触发按钮，一个条形码显示区域。
<!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方法吧。

点击运行可以看到效果:

<!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); 
}; 
var strTest = "dknt没有任何含义"; 
var iWidth = 8; 
</script> 
</head>

</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击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 全选提示:你可先修改部分代码,再按运行]

注意，我们已经把<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 全选提示:你可先修改部分代码,再按运行]

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

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

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：用javascript实现的仿Flash广告图片轮换效果
下一篇文章：javascript同步Import,同步调用外部js的方法

·在百度中搜索关于“手把手教你做超酷的条形码效果”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行