自适应宽度和高度的Panel（js测试程序篇）

在昨天的文章《自适应宽度和高度的Panel（html、css篇）》里我记录了实现Panel的html和css代码，在文章结尾处我提到了为了能很好的演示我做的demo，做了一个小的演示程序。虽然是个小程序，但对我个人而言，我觉得有记录的价值。因为我觉得身为开发人员，不光要时时创新写出新东西，更要学会总结手头的代码资源，哪怕是一个两三行的代码片段，这样才能做到温故而知新也。

演示地址：http://www.myliwu.com/xzwBlog/panel/Panel.html

不多废话，开始记录。首先把几个重要的方法说一说。

首先说说最核心的随机函数，如果没法实现随机值，那整个测试也就胡扯了。因为是要实现自适应宽度和高度，那就意味着高度、宽度不可确定性，那么我们就需要用随机函数输出随机的宽度和高度值。代码如下：

 //随机函数
 function selectFrom(iFirstValue, iLastValue){
     var iChoices = iLastValue - iFirstValue + 1;
     var numValue = Math.floor(Math.random()*iChoices+parseInt(iFirstValue));
     return numValue;
 }

这里使用的是比较普遍的随机函数公式，这个公式很重要，一定要牢记在心。如下：

 total_number_of_choices = iLastValue - iFirstValue + 1;
 number = Math.floor(Math.random() * total_number_of_choices + first_possible_value);

然后是一个正则判断输入框的值是否为正整数。如果输入不是正整数，即有效的宽度或高度值，那就默认用程序预设的参数值做随机区间临界值。

 //正则匹配输入有效值为正整数
 function test1(obj){
     var reg = new RegExp("^[0-9]*$");//匹配0开头的N位数字
     return reg.test(obj);
 }

最后，再来看一个输入框获得焦点改变默认value值的方法。这个方法首先预设值作为输入框的默认value，当用户点击输入框，默认value值清空等待用户输入数值。如果用户输入了具体数字，然后将光标移到下一个输入框，刚输入值的输入框便保持显示当前输入值；如果用户仅仅只是点击了输入框而没有输入数值，而又继续点击下一个输入框时，那刚才的输入框又恢复显示默认value做为提示。这个输入框提示代码应用很普遍，比如搜索引擎、表单中，它能起到很友好的提示或导向作用，我在很多项目里都会用到它。代码如下：

 1 j.fn.focusHandler = function(){
 2     var _textElem = j(this).find(":text");
 3     var txtList = new Array("默认最小值：200","默认最大值：400","默认最小值：50","默认最大值：100");
 4     _textElem.each(function(i){
 5         j(_textElem[i]).val(txtList[i]);
 6         var _value = j(this).val();
 7         j(this).focus(function(){
 8             if(this.value == _value)
 9                 j(this).css("color","#333").val('');
         }).blur(function(){
             if(this.value == ""){
                 j(this).css("color","#666").val(_value);
             }
         });
     });
 };

其他的代码就没什么好说的了。有兴趣的朋友可以去看看，演示地址：http://www.myliwu.com/xzwBlog/panel/Panel.html