原生 JavaScript 常用工具函数封装与使用指南

Cookied 生命周期管理

在处理用户会话状态时，直接操作 document.cookie 较为繁琐且容易出错。以下封装了三组函数，用于简化 Cookie 的设置、获取与清除过程，支持自动处理过期时间。

第 1 步：设置 Cookie (setCookie)

目的：向浏览器存储键值对，并可选地设置生存天数。

• 参数：name (字符串，键名), value (字符串，值), iDay (数值或布尔值，负数表示删除，false 表示不过期)。
• 逻辑：若指定了 iDay，则计算未来的 Expires 日期并存入 Cookie；否则仅存入当前会话级数据。

function setCookie(name, value, iDay)
{
    if(iDay!==false)
    {
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie=name+'='+value+';expires='+oDate+';path=/';
    }
    else
    {
        document.cookie=name+'='+value;
    }
}

第 2 步：获取与删除 Cookie

获取 (getCookie)：遍历 document.cookie 分割后的数组，匹配键名并返回对应值。若未找到则返回空字符串。

function getCookie(name)
{
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++)
    {
        var arr2=arr[i].split('=');
        if(arr2[0]==name)
        {
            return arr2[1];
        }
    }
    return '';
}

删除 (removeCookie)：通过调用 setCookie 并将有效期设为 -1 天来实现即时过期删除。

function removeCookie(name)
{
    setCookie(name, 'a', -1);
}

跨浏览器事件处理与 DOM 查询

早期 IE 与现代标准浏览器在事件模型上存在差异（attachEvent vs addEventListener），且原生 API 缺乏直接通过 Class 名称获取元素集合的功能。以下工具解决了这两个痛点。

第 1 步：统一事件绑定与移除

入口：任意 DOM 对象实例。

动作：myAddEvent 和 myDelEvent 通过特性检测（Feature Detection）自动选择正确的 API 绑定。注意：IE9+ 推荐使用标准的 bindEvent / unbindEvent 系列，此处提供的兼容性版本主要用于老旧环境适配。

// 兼容旧版 IE 的添加事件
function myAddEvent(obj, ev, fn){
    obj.attachEvent?obj.attachEvent('on'+ev, fn):obj.addEventListener(ev, fn, false);
}

// 兼容旧版 IE 的移除事件
function myDelEvent(obj, ev, fn){
    obj.detachEvent?obj.detachEvent('on'+ev, fn):obj.removeEventListener(ev, fn, false);
}

第 2 步：按 Class 查找 DOM 元素 (getByClass)

参数：oParent (父容器 DOM), sClass (目标类名字符串)。

原理：获取父容器下所有标签，利用正则表达式 /\bclass\b/ 进行单词边界匹配，防止部分匹配错误（如搜索 'btn' 误匹配到 'button'）。

function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var re=new RegExp('\\b'+sClass+'\\b', 'i');
    var aResult=[];
    for(var i=0;i<aEle.length;i++)
    {
        if(re.test(aEle[i].className))
        {
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}

日常辅助工具函数

包含时间戳格式化、区间随机数生成等高频使用的辅助逻辑。

第 1 步：时间格式化

time2date 将秒级时间戳转换为 YYYY-MM-DD HH:mm:ss 格式；time2day 仅返回日期部分。内部嵌套函数 d(n) 负责补零处理。

function time2date(t)
{
    function d(n){return n<10?'0'+n:''+n;}
    var oDate=new Date(t*1000);
    return oDate.getFullYear()+'-'+d(oDate.getMonth()+1)+'-'+d(oDate.getDate())+ ' '+d(oDate.getHours())+':'+d(oDate.getMinutes())+':'+d(oDate.getSeconds());
}

function time2day(t)
{
    function d(n){return n<10?'0'+n:''+n;}
    var oDate=new Date(t*1000);
    return oDate.getFullYear()+'-'+d(oDate.getMonth()+1)+'-'+d(oDate.getDate());
}

第 2 步：获取区间随机数

rnd(n, m) 返回 n 到 m 之间的浮点数。

function rnd(n, m)
{
    return Math.random()*(m-n)+n;
}

鼠标滚轮与拖拽交互实现

实现复杂的交互动画前，需要先解决输入设备的兼容性与坐标计算问题。

第 1 步：监听鼠标滚轮 (mouseScroll)

技术点：区分 Firefox (DOMMouseScroll) 与非 Firefox (mousewheel) 事件。根据 wheelDelta 的正负或 detail 的大小判断滚动方向，并通过 preventDefault 阻止默认行为。

function mouseScroll(obj, fnCallBack)
{
    bindEvent(obj, 'mousewheel', fnScroll);
    bindEvent(obj, 'DOMMouseScroll', fnScroll);
    function fnScroll(ev)
    {
        var oEvent=ev||event;
        var bDown;
        if(oEvent.wheelDelta)
        {
            bDown=oEvent.wheelDelta<0;
        }
        else
        {
            bDown=oEvent.detail>0;
        }
        fnCallBack(bDown);
        if(oEvent.preventDefault)oEvent.preventDefault();
        return false;
    }
}

第 2 步：元素拖拽逻辑 (drag)

参数：objEv (触发拖拽的元素), objMove (被移动的元素), fnMoveCallBack (位置回调，可选)。

核心算法： 1. 记录初始偏移量 disX, disY（考虑页面滚动距离）。 2. 监听 mousemove 计算新位置，并赋值给移动中的元素。 3. 兼容 IE 低版本的 setCapture 机制以确保持续捕获鼠标移动事件。

function drag(objEv, objMove, fnMoveCallBack)
{
    var disX=0,disY=0;
    objEv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        // 计算鼠标相对于元素的偏移，加上滚动条位移
        disX=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-objMove.offsetLeft;
        disY=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-objMove.offsetTop;
        
        if(objEv.setCapture)
        {
            objEv.onmousemove=fnMove;
            objEv.onmouseup=fnUp;
            objEv.setCapture();
        }
        else
        {
            document.onmousemove=fnMove;
            document.onmouseup=fnUp;
            return false;
        }
    };
    function fnMove(ev)
    {
        var oEvent=ev||event;
        var l=(document.documentElement.scrollLeft||document.body.scrollLeft)+oEvent.clientX-disX;
        var t=(document.documentElement.scrollTop||document.body.scrollTop)+oEvent.clientY-disY;
        if(fnMoveCallBack) fnMoveCallBack(l,t);
    }
    function fnUp()
    {
        this.onmousemove=null;
        this.onmouseup=null;
        if(this.releaseCapture)this.releaseCapture();
    }
}

高级运动效果算法

以下两个算法展示了如何通过模拟物理属性（加速度、摩擦力）来实现比线性过渡更自然的视觉效果。两者均包含简单的 IE6 降级处理，直接执行目标状态。

第 1 步：摆动运动 (swing)

特点：物体在从当前位置移向目标的过程中，会超越目标然后返回，产生类似钟摆的振荡效果。适用于 UI 组件的非阻塞式提醒或强调效果。

参数：cur (当前样式对象), target (目标样式对象), acc (振幅衰减系数，默认 0.1)。

zns.site.fx.swing=function (obj, cur, target, fnDo, fnEnd, acc)
{
    if(zns.site.fx.browser_test.IE6) { /* ...降级处理 */ return; }
    if(!acc)acc=0.1;
    // ... 省略初始化变量 ...
    clearInterval(obj.timer);
    obj.timer=setInterval(fnMove, 20);
    function fnMove(){
        // 逻辑：速度随方向改变，叠加位移
        if(x<50){ obj.__swing_v+=acc; }
        else{ obj.__swing_v-=acc; }
        x+=obj.__swing_v;
        // 插值计算当前帧样式
        for(var i in cur) now[i]=(target[i]-cur[i])*x/100+cur[i];
        if(fnDo)fnDo.call(obj, now);
        // 停止条件
        if(Math.abs(100-x)<1) { /* ...清理定时器... */ }
    }
};

第 2 步：弹性运动 (flex)

特点：模拟带有阻尼弹簧的效果。速度受距离差值影响逐渐减小，且有最大速度限制。

参数：fs (初始力度/分母，默认 6), ms (摩擦系数/衰减率，默认 0.75)。

zns.site.fx.flex=function (obj, cur, target, fnDo, fnEnd, fs, ms)
{
    if(zns.site.fx.browser_test.IE6) { /* ...降级处理 */ return; }
    var MAX_SPEED=16;
    if(!fs)fs=6;
    if(!ms)ms=0.75;
    // ... 省略初始化 ...
    obj.timer=setInterval(fnMove, 20);
    function fnMove(){
        // 增加速度（正向加速度），应用摩擦衰减
        obj.__flex_v+=(100-x)/fs;
        obj.__flex_v*=ms;
        // 限制最大速度防止抖动过于剧烈
        if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
        x+=obj.__flex_v;
        // ... 样式插值与结束判定 ...
    }
};