javascript通用代码合集

1.逐一绑定操作到window.onload上

//func:新函数
function addLoadEvent(func){
    //把现有的window.onload事件处理函数的值存入变量oldonload
    var oldload = window.onload;
    //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
    if(typeof oldload !== 'function'){
        window.onload = func;
    } else {
        //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾
        window.onload = function(){
            oldload();
            func();
        }
    }
}

2.插入一个元素到另一个元素的后面

　　虽然dom没有提供直接的方法，但是提供了这一操作的所有“原材料”

//首先，这个函数有两个参数：一个是将被插入的新元素，另一个是目标元素。
function insertAfter(newElement, targetElement){
    //把目标元素的parentNode属性值保存到变量parent里
    var parent = targetElement.parentNode;
    //检查目标元素是不是parent的最后一个元素
    if(parent.lastChild === targetElement){
        //如果是，则追加
        parent.appendChild(newElement);
    } else {
        //如果不是，则把新元素插入到目标元素和目标元素的下一个兄弟元素之间。
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

3.获取一个元素的下一个元素（不是节点，节点包括：文本节点，属性节点，元素节点）

//把当前元素的nextSibling节点作为参数传递给getNextElement函数
function getNextElement(node){
    if(node.nodeType === 1){
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}

4.为一个元素添加className

//参数一：需要添加新class的元素
//参数二：新的class设置值
function addClass(element,value){
    //检查className属性的值是否为null
    if(element.className === null){
        //如果是，把新的class设置值直接赋值给className属性
        element.className = value;
    } else {
        //如果不是，把一个空格和新的class设置值追加到className属性上去
        var newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

5.移动页面元素：前提是元素能够移动，比如postion:absolute，父元素为postion:relative

//移动元素到指定位置
//参数:
//elementID 元素ID
//final_x 目标位置横坐标
//final_y 目标位置纵坐标
//interval 计时器timeout时长
function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;

    var elem = document.getElementById(elementID);
    //清除掉元素下所有计时器，重新开始，防止多个计时器混乱
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    var xpos,ypos;
    //如果属性值为null，设置为0
    if(!elem.style.left){
        elem.style.left = "0px";
    }
    if(!elem.style.top){
        elem.style.top = "0px";
    }
    xpos = parseInt(elem.style.left);
    ypos = parseInt(elem.style.top);
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    /*if(xpos < final_x){
        xpos ++;
    }*/
    var dist;
    if(xpos < final_x){
        //实现由快到慢的动画效果
        dist = Math.ceil((final_x - xpos)/10);
        xpos += dist;
    }
    /*if(xpos > final_x){
        xpos --;
    }*/
    if(xpos > final_x){
        dist = Math.ceil((xpos - final_x)/10);
        xpos -= dist;
    }
    /*if(ypos < final_y){
        ypos ++;
    }*/
    if(ypos < final_y){
        dist = Math.ceil((final_y - ypos)/10);
        ypos += dist;
    }
    /*if(ypos > final_y){
        ypos --;
    }*/
    if(ypos > final_y){
        dist = Math.ceil((ypos - final_y)/10);
        ypos -= dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
    elem.movement = setTimeout(repeat,interval);
}

6.创建XMLHttpRequest对象

function getHTTPObject(){
    //检测浏览器是否存在XMLHttpRequest对象
    if(typeof window.XMLHttpRequest === "undefined"){
        XMLHttpRequest = function(){
            try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){}
            try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){}
            return false;
        }
    }
    return new XMLHttpRequest();
}

7.获取一个元素的样式

function getStyle(obj,target){
    if(obj.currentStyle){
        return obj.currentStyle[target];
    } else {
        return getComputedStyle(obj,null)[target];
    }
}

8.基于html4+css2的完美运动框架

//获取元素样式
function getStyle(obj,target){
    if(obj.currentStyle){
        return obj.currentStyle[target];
    } else {
        return getComputedStyle(obj,null)[target];
    }
}

/**
obj:要操作的对象
json:格式如下
var json={
    width:300,
    height:300
}
fnEnd:回调函数
*/
function startMove(obj,json,fnEnd){
    if(obj.timer){clearInterval(obj.timer);}

    obj.timer = setInterval(function(){
        var bStop = true;            //假设：所有的操作都执行完毕（测试所有属性都设置好的解决方案有很多，这里取其中一种比较巧的方式）
        for(var v in json){
            var attr = v;
            var iTarget = json[v];
            bStop = oper(obj,attr,iTarget,bStop);//执行缓冲运动
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fnEnd){fnEnd();}
        }
    },30);
}

function oper(obj,attr,iTarget,bStop){
    var cur = 0;
    if(attr === 'opacity'){
        cur = Math.round(parseFloat(getStyle(obj,'opacity'))*100);
    } else {
        cur = parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget-cur)/10;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);

    if(cur !== iTarget){
        bStop = false;            //没达到目标设置为否
        if(attr === 'opacity'){
            obj.style.opacity = parseFloat((cur + speed)/100);
            obj.style.filter = 'alpha(opacity:'+(cur + speed)+')';
        } else {
            obj.style[attr] = cur + speed + 'px';
        }
    }

    return bStop;
}

9 获取鼠标位置

function getPos(ev){
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY};
}

10 添加绑定事件

/*不用加on，例如:onclick写成click即可*/
function myAddEvent(obj,ev,fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+ev,fn);
        return;
    }
    if(obj.addEventListener){
        obj.addEventListener(ev,fn,false);
        return;
    }
}

11 ajax调用方法

function ajax(url,succFn,failedFn){
    //1.创建XMLHttpRequest对象
    var oAjax = null;
    if(window.ActiveXObject){
        oAjax = new ActiveXObject('MicrosoftHTTP');
    } else {
        oAjax = new XMLHttpRequest();
    }

    //2.连接服务器
    oAjax.open('GET',url,true);

    //3.发送数据
    oAjax.send();

    //4.接收数据
    oAjax.onreadystatechange = function(){
        //解析完毕
        if(oAjax.readyState === 4){
            if(oAjax.status === 200){//状态码为200
                succFn(oAjax.responseText);
            } else {
                if(failedFn){
                    failedFn(oAjax.status);//返回http状态码
                }
            }
        }
    }
}

11.javascript继承示例

function Drag(id){
    var _this = this;
    this.id = id;
    this.disX = null;
    this.disY = null;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function(ev){
        _this.fnDown(ev);

        return false;//阻止浏览器默认事件
    };
};

Drag.prototype.fnDown = function(ev){
    var oEvent = ev||event;
    var _this = this;
    this.disX=oEvent.clientX-this.oDiv.offsetLeft;
    this.disY=oEvent.clientY-this.oDiv.offsetTop;
    document.onmousemove = function(ev){
        _this.fnMove(ev);
    };
    document.onmouseup = function(){
        _this.fnUp();
    };
}

Drag.prototype.fnMove = function(ev){
    var oEvent = ev||event;
    this.oDiv.style.left = oEvent.clientX-this.disX + 'px';
    this.oDiv.style.top = oEvent.clientY-this.disY + 'px';
}

Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseout = null;
}

function LimitDrag(id){
    Drag.call(this,id);//继承属性
}

//继承方法
for(var v in Drag.prototype){
    LimitDrag.prototype[v] = Drag.prototype[v];
}

LimitDrag.prototype.fnMove = function(ev){//重写方法
    var oEvent = ev||event;
    var l = oEvent.clientX-this.disX;
    var t = oEvent.clientY-this.disY;

    if(l<0){
        l=0;
    } else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) {
        l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }
    if(t<0){
        t=0;
    } else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
        t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
    }

    this.oDiv.style.left = l + 'px';
    this.oDiv.style.top = t + 'px';

}