函数集合

给定范围内的随机数

function getRandomArbitrary(min, max) { 
   return Math.random() * (max - min) + min;
}

给定范围内的随机整数

function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
}

增加索引值

function arrIndexOf(objArr, item){
        for(var i=0; i<objArr.length;i++){
            if(objArr[i] == item){
                return i;
            }
        }
        return -1;
    }

到文档顶部的位置

function getPos(obj) {
   var pos = {left:0, top:0};
   while (obj) {
     pos.left += obj.offsetLeft;
     pos.top += obj.offsetTop;
     obj = obj.offsetParent; 
   }
   return pos;
}

获取计算后的样式

function getStyle(obj,property) {
        if(obj.currentStyle){
            return obj.currentStyle[property];
        }
        else{
            var currentStyle=getComputedStyle(obj);
            return currentStyle[property];
        }
    }

标准浏览器下逐渐透明

function doOpacity(obj){
        var opacity = getStyle(obj, 'opacity');
        opacity = parseFloat(opacity);
        var timer = setInterval(function(){
            opacity -= 0.1;
            obj.style.opacity = opacity;
            if(opacity<0){
                clearInterval(timer);
            }
        }, 400);
    }

逐渐移动元素

function move(obj,direction,distance,callBack){
        var position=getStyle(obj,direction);
        position=parseInt(position);

        var remove;
        if(distance>position){
            remove=false;
        }
        else{
            remove=true;
        }
        var step=remove ? -5:5;

        var timer=setInterval(function(){
            position=position+step;
            if(position>distance && !remove || position<distance && remove){
                position=distance;
            }
            obj.style[direction]=position+"px";
            if(position==distance){
                clearInterval(timer);
                callBack && callBack();
            }
        },300);
    }

元素抖动

function shake(obj, attr,range, callback){
            var arr = [];
            var pos = getStyle(obj, attr);
            pos = parseInt(pos);

            for(var i=range; i>0; i=i-2){
                arr.push(i);
                arr.push(-i);
            }
            arr.push(0);

            i=0;
            var timer = setInterval(function(){
                obj.style[attr] = (pos + arr[i])+'px';
                i++;
                if(i==arr.length){
                    clearInterval(timer);
                    callback && callback();
                }
            }, 20);
    }

多个元素依次抖动

var index=0;
var onOff=false;
function shakeElements(elements){
    if(!onOff){
        var timer=setInterval(function(){
                
            (function(index){
                shake(elements[index],'top',30,function(){
                    shake(elements[index],'left',50,function(){
                        if(index==elements.length-1){
                            onOff = false;
                        }
                    })
                });                 
            })(index);
            index++;
            if(index>elements.length-1){
                clearInterval(timer);
                index=0;  
            };
        },800)
    }
    onOff=true;
}

通过类名获取指定标签下元素的手写方法

function getElementsByClassName(rootElement,tagName,name){
    var findArr = [];
    var arr = rootElement.getElementsByTagName(tagName);

    for(var i=0; i<arr.length; i++){
        var classList = arr[i].className.split(' ');
        for(var j=0; j< classList.length; j++){
            if(classList[j] === name){
                findArr.push(arr[i]);
                break;
            }
        }
    }
    return findArr;
}

Unicode码检测用户输入的字符是否为数字--'0-9'对应的编码是'48-57'

function detectNum(str){
    var n;
    for(var i=0; i<str.length; i++){
        n = str.charCodeAt(i) ;
        if( n<48 || n>57){
            return false
        }

    }
    return true;
}

选项卡---结构一致可用

function changOption(obj){
        var options =  obj.children[0].children[0].children;//根据需要取舍
        var contents = obj.children[1].children;//根据需要取舍

        for(var i=0;i<options.length;i++){
            options[i].index = i;
            options[i].onmouseover= function(){
                for(var i=0;i<options.length;i++){
                    options[i].className = '';
                }

                this.className = 'active';

                var index = this.index;
                for(var i=0;i<contents.length;i++){
                    contents[i].style.display = 'none';
                }

                contents[index].style.display = 'block';
            }
        }
    }

数组去重

function removeRepetitive(arr){
    for(var i=0;i<arr.length; i++){
      for(var j=i+1; j<arr.length;j++){
        if(arr[i]==arr[j]){
          arr.splice(j, 1);
          j--;//删除元素后,索引值相应的发生变化
        }
      }
    }
    return arr;
}

对象浅拷贝和深拷贝

  • 浅拷贝
function shallowCopy(oldObj) {
    var newObj = {};
    for(var i in oldObj) {
        if(oldObj.hasOwnProperty(i)) {
            newObj[i] = oldObj[i];
        }
    }
    return newObj;
}
  • 深拷贝
function deepCopy(oldObj) {
    var newObj = oldObj;
    for(var key in oldObj) {
        if(typeof oldObj[key] === 'object') {
            newObj[key] = deepCopy(oldObj[key]);
        }else{
            newObj[key] = oldObj[key];
        }
    }
    return newObj;
}

事件对象

function fn(ev){ 
      var ev = ev || window.enent; 
      console.log(ev);
}

阻止事件冒泡

function stopPropagation(event) {
    if (event.stopPropagation)
        event.stopPropagation();
    else{
        event.cancelBubble = true;
    }
}

阻止元素默认行为

function preventDefault(ev) {
    if (ev.preventDefault)
        ev.preventDefault();
    else
        ev.returnValue = false;
}

绑定事件函数

function addEvent(node,type,handler){
    if(node.addEventListener){
        node.addEventListener(type,handler,false);
    }
    else{
        //node.attachEvent('on'+type,handler);
        node[type+handler]=function(){
            handler.apply(node);
        };
        node.attachEvent('on'+type,node[type+handler])
        // node.attachEvent('on'+type,function(){
        //  handler.apply(node);//handler.call(node);
        //  //function fn(arg1, arg2){ console.log(arg1, arg2) }
        //  //fn.apply({}, [1,2])/*1  2*/,fn.call({}, 1, 2)/*1  2*/
        //  //apply和call为函数的方法
        // });
    }
}

移除事件函数

function removeEvent(node,type,handler){
    if(node.removeEventListener) {
        node.removeEventListener(type,handler,false);
    }
    else{
        node.detachEvent('on'+type,node[type+handler]);
    }
};

在窗口内的拖拽

function drag(obj){
    obj.onmousedown=function(ev){
        if(ev.preventDefault){
            ev.preventDefault();
        }
        else{
            ev.returnValue=false;
        }
        ev=window.event||ev;
        var clientX=ev.clientX;
        var clientY=ev.clientY;
        var dX=clientX-obj.offsetLeft;
        var dY=clientY-obj.offsetTop;
        document.onmousemove=function(ev){
            ev=window.event||ev;
            var left=ev.clientX-dX;
            var top=ev.clientY-dY;
            var maxLeft=document.documentElement.clientWidth-obj.offsetWidth;
            var maxTop=document.documentElement.clientHeight-obj.offsetHeight;
            if (left<0){
                left=0;
            }
            if(top<0){
                top=0;
            }
            if(left>maxLeft){
                left=maxLeft;
            }
            if(top>maxTop){
                top=maxTop;
            }
            obj.style.left=left+'px';
            obj.style.top=top+'px';
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
};

求大于1的奇数积

function oddProduct(num){
    var product=1;
    for (var i = 1; i <= num; i++) {
        if(i%2!=0){
            product*=i;
        }
    }
    return product;
}

数组降序排序

  • sort()
function descendingSort1(arr){
    arr.sort(function(a,b){
        return b-a;
    })
    return arr;
}
  • 冒泡排序
function descendingSort2(arr){
    var themp=0;
    for (var i = 0; i < arr.length-1; i++) {
        for (var j = i+1; j < arr.length; j++) {
            if(arr[j]>arr[i]){
                themp=arr[i];
                arr[i]=arr[j];
                arr[j]=themp;
            }
        }
    }
    return arr;
}

仿斐波那契数列---2/1,3/2,5/3,8/5...求出这个数列的前n项之和

function fn(n){
    var num1=1;
    var num2=2;
    var num3=0;
    var result=0;
    for (var i = 0; i < n; i++) {
        result+=num2/num1;
        num3=num2;
        num2+=num1;
        num1=num3;
    }
    return result;
}

磁性吸附

function drag(obj){
    obj.onmousedown = function(ev){
        var ev = ev || window.event;


        var disX = ev.clientX - obj.offsetLeft;
        var disY = ev.clientY - obj.offsetTop;
        document.onmousemove = function(ev){
            var ev = ev || window.event;


            var left  = ev.clientX - disX;
            var top = ev.clientY - disY;
            if(left<100){//距离可视区域范围的四边小于50px,则元素将直接吸附对应的边上
                left=0;
            }
            else if(left>document.documentElement.clientWidth-obj.offsetWidth){
                left = document.documentElement.clientWidth-obj.offsetWidth;
            }
            if(top<0){
                top=0;
            }
            else if(top>document.documentElement.clientHeight-obj.offsetHeight){
                top = document.documentElement.clientHeight-obj.offsetHeight;
            }

            obj.style.left =  left + 'px';
            obj.style.top = top + 'px';
            return false;

        }

        obj.onmouseup = function (){
            document.onmousemove= null;
            obj.onmouseup = null;
        }
        return false;
    }

}

碰撞

function collide(obj1,obj2){
    var ev = ev || window.event;

    var obj1L = obj1.offsetLeft;
    var obj1T = obj1.offsetTop;
    var obj1W = obj1.offsetWidth;
    var obj1H = obj1.offsetHeight;

    var obj2L = obj2.offsetLeft;
    var obj2T = obj2.offsetTop;
    var obj2W = obj2.offsetWidth;
    var obj2H = obj2.offsetHeight;

    if( obj1L > obj2L - obj1W  && 
        obj1L < obj2L+ obj2W &&
        obj1T > obj2T - obj1H  &&
        obj1T < obj2T + obj2H
    ){//碰撞
        obj2.style.background='red';
    }
    else{
        obj2.style.background='grey';
    }

}

拖拽范围函数

    function drag(obj){
    bindEvent(obj, 'mousedown', function(ev){


        var disX = ev.clientX - obj.offsetLeft;
        var disY = ev.clientY - obj.offsetTop;


        function onMousemove(ev){
            ev.preventDefault();

            var _top = ev.clientY - disY;
            var left = ev.clientX - disX;

            if(left<0){
                left = 0;
            }

            if(_top<0){
                _top = 0;
            }

            if( _top > window.innerHeight-obj.offsetHeight ){
                _top = window.innerHeight-obj.offsetHeight;
            }

            if( left > window.innerWidth-obj.offsetWidth ){
                left = window.innerWidth-obj.offsetWidth;
            }


            obj.style.top = _top + 'px';
            obj.style.left =  left + 'px';
            
        }

        bindEvent(window, 'mousemove', onMousemove);

        function onMouseup(ev){
            removeEvent( window, 'mousemove', onMousemove );
            removeEvent( window, 'mouseup', onMouseup );
        }

        bindEvent(window, 'mouseup', onMouseup);
    });

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容