最近项目需要研究了一下JS,收集和编写了一些JS代码,共享一下
    
![]()
/**//** Cookie **/
//定义全局变量Cookie
//eg:Cookie.setCookie('user','jack',{expireDays:1,expireHours:20,path:"/"}
![]()
var Cookie=
{//默认以秒为单位
![]()
     setCookie:function(name,value,option)
{
      var str=name+"="+escape(value);
![]()
      if (option)
{
         var ms=0;
         
![]()
         if (option.expireDays)        
{ try 
{ ms+=option.expireDays*24*3600*1000;}catch(e)
{}}//天数
![]()
         if (option.expireHours)    
{ try 
{ ms+=option.expireHours*3600*1000;} catch(e)
{}}//小时
![]()
         if (option.expireMinutes)    
{ try 
{ ms+=option.expireMinutes*60*1000;}catch(e)
{}}//分钟
![]()
         if (option.expireSeconds)    
{ try 
{ ms+=option.expireSeconds*1000;} catch(e)
{}}//秒钟
![]()
         if (ms==0)                    
{ try 
{ ms=option*1000;} catch(e)
{}}//默认以秒为单位传入时间
         
![]()
         if (ms!=0)
{  
            var date=new Date();
            date.setTime(date.getTime()+ms);
            str+="; expires="+date.toGMTString();
         }
         if (option.path) str+="; path="+path;
         if (option.domain) str+="; domain="+domain;
         if (option.secure) str+="; true";
         
       }
       document.cookie=str;
     }, 
     getCookie:function(name)
![]()
     
{
       var cookieArray=document.cookie.split("; ");
       var cookie=new Object();
![]()
       for (var i=0;i<cookieArray.length;i++) 
{
        var arr=cookieArray[i].split("=");
        if (arr[0]==name) return unescape(arr[1]);
       }
       return "";
     },
![]()
     deleteCookie:function(name)
{
![]()
       this.setCookie(name,"",
{expireDays:-1});
     }
 }//COOKIE 
//功能介绍:ToolTips
//代码文件:tooltip.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype.js库
![]()
![]()
/**//* tooltip.js - Small tooltip library on top of Prototype 
 *
 * Usage: 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *   </script>
 * 
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears. 
 * 
 * Example:
 * 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1
.<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *   以下代码应该放在所有的element定义之后,一般放置在页面的底部。
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip');//使用默认的CSS,将忽略自定义的CSS
*      var my_tooltip = new Tooltip('product_1', 'tooltip',false);//使用自定义的CSS
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */
![]()
//需要使用prototype.js文件
var Tooltip = Class.create();
![]()
Tooltip.prototype = 
{
    version:'1.0.0',//版本
    //default_css:true,
![]()
    style:
{
        marging:"0px",
        padding:"5px 8px 3px 8px",
        backgroundColor:"#FFFFFF",//"#d6d6fc",
        color:"#349045",
        borderWidth:"1px",
        borderStyle:"solid",
        borderColor:"gray",
        filter:"progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)"
      },
![]()
       initialize: function(element, tool_tip) 
{
           this.initialize(element,tool_tip,true);
       },
![]()
      initialize: function(element, tool_tip,default_css) 
{
![]()
          if (default_css==false) 
{
              this.default_css=false; 
![]()
          }else 
{
              this.default_css=true;
          }
  
![]()
        var options = Object.extend(
{
          delta_x: 5,
          delta_y: 5,
          zindex: 1000//足够大的数,使层能够显示在最前面
![]()
        }, arguments[1] || 
{});
    
        this.element      = $(element);
        this.tool_tip     = $(tool_tip);    
        this.options      = options;    
        this.tool_tip.hide();        // hide the tool-tip by default    
        this.eventMouseOver = this.showTooltip.bindAsEventListener(this);//绑定事件处理程序
        this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    
        this.registerEvents();
      },
    
![]()
      destroy: function() 
{//解除事件处理
        Event.stopObserving(this.element, "mouseover", this.eventMouseOver);//停止对事件的观察(监听)
        Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
      },
    
![]()
      registerEvents: function() 
{//注册事件处理
        Event.observe(this.element, "mouseover", this.eventMouseOver);
        Event.observe(this.element, "mouseout", this.eventMouseOut);
      },
    
![]()
      showTooltip: function(event)
{
        Event.stop(event);
        // get Mouse position
        var mouse_x = Event.pointerX(event);
        var mouse_y = Event.pointerY(event);
        
        // decide if wee need to switch sides for the tooltip
        var dimensions = Element.getDimensions( this.tool_tip );
        var element_width = dimensions.width;
        var element_height = dimensions.height;
        
![]()
        if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) )
{ // too big for X
            mouse_x = mouse_x - element_width;
            // apply delta to make sure that the mouse is not on the tool-tip
            mouse_x = mouse_x - this.options.delta_x;
![]()
        } else 
{
            mouse_x = mouse_x + this.options.delta_x;
        }
        
![]()
        if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) )
{ // too big for Y
            mouse_y = mouse_y - element_height;
            // apply delta to make sure that the mouse is not on the tool-tip
            mouse_y = mouse_y - this.options.delta_y;
![]()
        } else 
{
            mouse_y = mouse_y + this.options.delta_y;
        } 
        
        // now set the right styles
        this.setStyles(mouse_x, mouse_y);
        
        // finally show the Tooltip
        //new Effect.Appear(this.tool_tip);
        new Element.show(this.tool_tip);
      },
      
![]()
      setStyles: function(x, y)
{
        // set the right styles to position the tool tip
![]()
        Element.setStyle(this.tool_tip, 
{ position:'absolute',
                                          top:y + "px",
                                          left:x + "px",
                                          zindex:this.options.zindex
                                        });
        
        // apply default theme if wanted
![]()
        if (this.default_css==true)
{//应用缺省的css
                    Element.setStyle(this.tool_tip, this.style);    
        }    
      },
![]()
![]()
      hideTooltip: function(event)
{
        //new Effect.Fade(this.tool_tip);
        new Element.hide(this.tool_tip);
      },
    
![]()
      getWindowHeight: function()
{
        var innerHeight;
![]()
        if (navigator.appVersion.indexOf('MSIE')>0) 
{
            innerHeight = document.body.clientHeight;
![]()
        } else 
{
            innerHeight = window.innerHeight;
        }
        return innerHeight;    
      },
     
![]()
      getWindowWidth: function()
{
        var innerWidth;
![]()
        if (navigator.appVersion.indexOf('MSIE')>0) 
{
            innerWidth = document.body.clientWidth;
![]()
        } else 
{
            innerWidth = window.innerWidth;
        }
        return innerWidth;    
      }
}
![]()
![]()
/**//*
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/prototype.js" language="javascript" type="text/javascript"></script>
<script src="js/tooltip.js" type="text/javascript"></script>
</head>
<body>
    <div id='tooltip1' style="display:none; margin: 5px; background-color: red;">
     <h1>HOTDON</h1>
     Detail infos on product 1
.<br />
     Detail infos on product 1
.<br />
   </div>
    <div id='tooltip2' style="display:none; margin: 5px; background-color: red;">
     <h1>INFO</h1>
     Detail infos on product 1
.<br />
     Detail infos on product 1
.<br />
   </div>
   <a href="http://www.hotdon.com.cn" id="hotdon">hotdon</a>
   <div id='info' style="cursor:hand;">
     信息列表
   </div>
</body>
</html>
    <script type="text/javascript">
          new Tooltip('info', 'tooltip1');
          new Tooltip('hotdon', 'tooltip2');
   </script>
*/ 
//功能介绍:UrlParams分析Url参数
//代码文件:UrlParams-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
![]()
![]()
/**//*<script language="javascript" type="text/javascript">
    var params=new UrlParams("http://www.pyp.edu.cn?id=1&name=zengqs");
    alert(params.get("name"));
    alert(params.get("id"));
    alert(params.getArguments().length);
    alert(params.getArguments()[1]);
</script>*/
![]()
var UrlParams = Class.create();
![]()
![]()
UrlParams.prototype=
{
    args:new Object(),
    args_name:new Array(),
    initialize:function(query)
![]()
    
{
        //this.args = new Object();
        if (query.indexOf("?")!=-1)//如果包含?则取?之后的部分,以保持兼容性
![]()
        
{
            query=query.substring(query.indexOf("?")+1);
        }
        var pairs = query.split("&"); //Break at &
        this.args_name=new Array(pairs.length);
        
        for(var i = 0; i < pairs.length; i++) 
![]()
        
{
            var pos = pairs[i].indexOf('='); //Look for "name=value"
            if (pos == -1) continue; //If not found, skip
            var argname = pairs[i].substring(0,pos); //Extract the name
            var value = pairs[i].substring(pos+1); //Extract the value
            this.args[argname] = unescape(value); //Store as a property
            this.args_name[i]=argname;//保存参数名
              // In JavaScript 1.5, use decodeURIComponent(  ) 
              // instead of escape(  )
        }
    },
    get:function(name)
![]()
    
{
        return this.args[name];
    },
    getArguments:function()//获取所有的参数的名称的列表
![]()
    
{
        return this.args_name;
    }
};
![]()
 
//功能介绍:窗体表单验证程序
//代码文件:FormValidate-1.0.0.js
//作者:曾青松,Jack zeng(pypzengqs@126.com),2006.11.5
//版本:1.0.0
//依赖关系:需要prototype-1.4.0.js库
![]()
//
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 功能:通用验证所有的表单元素.
// 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
// 
//--------------- 客户端表单通用验证checkRegForm(oForm) -----------------
// 正则表达式用例
// 1、^\S+[a-z A-Z]$ 不能为空 不能有空格 只能是英文字母
// 2、\S{6,} 不能为空 六位以上
// 2、\S{1,} 不能为空
// 3、^\d+$ 不能有空格 不能非数字
// 4、(.*)(\.jpg|\.bmp|\.gif|.png|\.jpeg)$ 只能是jpg和bmp格式
// 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式
//
//6-7用于select控件
//
// 6、^0$ 至少选一项
// 7、^0{2,}$ 至少选两项
//
// 8、^[\s|\S]{20,}$ 不能为空 二十字以上
// 9、^\+?[a-z0-9](([-+.]|[_]+)?[a-z0-9]+)*@([a-z0-9]+(\.|\-))+[a-z]{2,6}$邮件
// 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)* 
//输入多个地址用逗号或空格分隔邮件
// 11、^(\([0-9]+\))?[0-9]{7,8}$电话号码7位或8位或前面有区号例如(022)87341628
// 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
// 只能是字母、数字、下划线;必须有@和.同时格式要规范 邮件
// 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子,更精练。
//14 ^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$ 
//
![]()
![]()
//例子:
// <input type="text" id="text1" checkReg="\S{2,4}" warning="姓名不能为空,长度为2-4个字母(汉字)!" value />
//<select name="type_show" id="type_show" checkReg="\S{1,}" warning="至少选择一项!">
//    <option value selected>--请选择-- </option>
//    <option value="1">男</option>
//    <option value="0">女</option>
//</select>
![]()
//调用实例  if (false==new FormValidate().validate($('form_main'))) return false;
![]()
function FormValidate()
{};
![]()
//以下构造方法需要使用prototype-1.4.0.js库
//var FormValidate=Class.create();
![]()
FormValidate.prototype=
{
    //initialize:function(){},//Constructor function,prototype-1.4.0.js库类的构造函数,必须重载
    validate:function(oForm)//类的公开的主要方法,oForm为要验证的表单的名称
![]()
    
{
        var All_ele = oForm.elements;
        //遍历所有表元素
        for(var i=0;i<All_ele.length;i++)
![]()
        
{
            //是否需要验证
            //if(All_ele[i].checkReg)
            if(All_ele[i].getAttribute('checkReg'))
![]()
            
{
                //取得验证的正则字符串
                //var sReg = All_ele[i].checkReg;//FireFox中不能工作
                var sReg = All_ele[i].getAttribute('checkReg');//FireFoxzhong
                //取得表单的值,用通用取值函数
                var sVal = this.Getcheck_value(All_ele[i]);
                //字符串->正则表达式,不区分大小写
                var reg = new RegExp(sReg,"i");
                if(!reg.test(sVal))
![]()
                
{
                    //验证不通过,弹出提示warning
                    //alert(All_ele[i].warning);
                    alert(All_ele[i].getAttribute('warning'));
                    //该表单元素取得焦点,用通用返回函数
                    this.check_GoBack(All_ele[i]);
                    return false;
                }
            }
        }
        return true;
    },
    
    //======================================以下均为帮助方法=================================
    
    //通用取值函数分三类进行取值:文本输入框,直接取值el.value
    //单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个,
    //单、多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
    
    Getcheck_value:function (el)
![]()
    
{
        //取得表单元素的类型
        var sType = el.type;
        var ret="";
        switch(sType)
![]()
        
{
            case "text":
            case "hidden":
            case "password":
            case "file":
![]()
            case "textarea": 
{ret=el.value; break;}
            case "checkbox":
![]()
            case "radio": 
{ ret=this.GetValueChoose(el); break;}
            case "select-one":
![]()
            case "select-multiple": 
{ ret=this.GetValueSel(el); break;}
        }
        return ret;
    },
    
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    GetValueChoose:function (el)
![]()
    
{
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.name);
        for(var i=0;i<tmpels.length;i++)
![]()
        
{
            if(tmpels[i].checked)
![]()
            
{
                sValue += "0";
            }
        }
        return sValue;
    },
    
    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    
    GetValueSel:function (el)
![]()
    
{
        var svalue = "";
        for(var i=0;i<el.options.length;i++)
![]()
        
{
            //单选下拉框提示选项设置为value=""
            if(el.options[i].selected && (el.options[i].value!=""))
![]()
            
{
                svalue += "0";
            }
        }
        return svalue;
    },
    
    //通用返回函数,验证没通过返回的效果.分三类进行取值
    //文本输入框,光标定位在文本输入框的末尾
    //单多选,第一选项取得焦点
    //单多下拉菜单,取得焦点
    
    check_GoBack:function (el)
![]()
    
{
![]()
        if (el==null) 
{return;}
        
        try
![]()
        
{
            //取得表单元素的类型
            
            var sType = el.type;
            switch(sType)
![]()
            
{
                case "text":
                case "hidden":
                case "password":
                case "file":
                case "textarea": 
![]()
                
{
                    el.focus();
                    var rng=el.createTextRange(); 
                    rng.collapse(false); 
                    rng.select(); 
                    break;
                }
                case "checkbox": 
                case "radio":
![]()
                
{ 
                    var All_ele=document.getElementsByName(el.name);
                    All_ele[0].focus();
                    break;
                }
                case "select-one":
                case "select-multiple":
![]()
                
{
                    el.focus();
                    break;
                }
            }//switch
        }
![]()
        catch(e)
{}
    },
    
    //checkReg field
    checkRegField:function (Field)
![]()
    
{
        //是否需要验证
        if(Field.checkReg)
![]()
        
{
            //取得验证的正则字符串
            var sReg = Field.checkReg;
            //取得表单的值,用通用取值函数
            var sVal = this.Getcheck_value(Field);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg);
            if(!reg.test(sVal))
![]()
            
{
                //验证不通过,弹出提示warning
                alert(Field.warning);
                //该表单元素取得焦点,用通用返回函数
                this.check_GoBack(Field);
                return false;
            }
        }
        return true;
    }
};