几道程序

来源:互联网 发布:恶搞头像软件 编辑:程序博客网 时间:2024/06/09 19:30

实现拖拽

  window.onload = function () {        //获取需要拖拽的div        var div1 = document.getElementById("div1");        //添加鼠标按下事件        div1.onmousedown = function (evt) {            var oEvent = evt || event;            //获取按下鼠标到div left  top的距离            var distanceX = oEvent.clientX - div1.offsetLeft;            var distanceY = oEvent.clientX - div1.offsetTop;            //添加doc滑动时间            document.onmousemove = function (evt) {                var oEvent = evt || event;                //重新计算div的left top值                var left = oEvent.clientX - distanceX;                var top = oEvent.clientY - distanceY;                //left  当小于等于零时,设置为零 防止div拖出document之外                if (left <= 0) {                    left = 0;                }                //当left 超过文档右边界  设置为右边界                else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {                    left = document.documentElement.clientWidth - div1.offsetWidth;                }                if (top <= 0) {                    top = 0;                }                else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {                    top = document.documentElement.clientHeight - div1.offsetHeight;                }                //重新给div赋值                div1.style.top = top + "px";                div1.style.left = left + "px";                //添加鼠标抬起事件            }        }    }

数组去重

  var arr1 = [1,2,2,7,5,1,6,7,7];        function rmRepeat(arr){            var arr2 = [];            var numObj = {};            for(var i = 0;l=arr.length,i<l;i++){                if(!numObj[arr1[i]]){                    numObj[arr1[i]] = true;                    arr2.push(arr1[i]);                }            }            return arr2;    }

事件

 var btn = document.getElementById("btn");    var EventUtil = {        //取得事件的event对象        getEvent: function(event){            return event?event:window.event;        },        //添加事件处理程序        addHandler: function(element,type,handler){            if(element.addEventListener){                element.addEventListener(type,handler,false);            }else if(element.attachEvent){                element.attachEvent("on"+type,handler);            }else{                element["on"+type]=handler            }        },        //移除事件处理程序        removeHandler: function(){            if(element.removeEventListener){                element.removeEventListener(type,handler,false);            }else if(element.detachEvent){                element.detachEvent("on"+type,handler);            }else{                element["on"+type] = null;            }        },        //返回事件的目标        getTarget: function(event){            return event.target||event.srcElement;        },        //阻止事件的默认行为        stopDefault: function(event){            if(event.preventDefault){                event.preventDefault()            }else{                event.returnValue = false;            }        },        //阻止事件冒泡        stopPropagation: function(event){            if(event.stopPropagation){                event.stopPropagation();            }else{                event.cancelBubble = true;            }        }    };    EventUtil.addHandler(btn,"click",function(event){        alert("btn");        EventUtil.stopPropagation(event);    });    var body = document.body;    EventUtil.addHandler(body,"click",function(){        alert("body");    })

表单序列化

function serialize(form){    var parts = [],        field = null,        i, j, len, optLen, option, optValue;    for(i=0, len=form.elements.length; i<len; i++){        field = form.elements[i];        switch(field.type){            case "select-one":       //单选框            case "select-multiple":  //多选框                if(field.name.length){                    for(j=0, optLen = field.options.length; j<optLen; j++){                        option = field.options[j];                        if(option.selected){                            optValue = '';                            if(option.hasAttribute){                                optValue = (option.hasAttribute('value') ? option.value : option.text);  //非IE                            }else{                                optValue = (option.attributes['value'].specified ? option.value : option.text); //IE                            }                            parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));                        }                    }                }                break;            case undefined:  //字段集            case "file":     //文件输入            case "submit":   //提交按钮            case "reset":    //重置按钮            case "button":   //自定义按钮                break;            case "radio":    //单选按钮            case "checkbox":  //复选按钮                if(!field.checked){                    break;                }            default:                //不包含没有名字的表单字段                if(field.name.length){                    parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));                }        }    }    return parts.join("&"); //查寻字符串格式输出}window.onload = function(){    var form = document.getElementById('target');    console.log(serialize(form));};