一些常用封装函数的分享

对函数进行封装是一个良好的程序思想,是一个良性的编程方法。当我们需要某功能函数时,我们只需要调用即可,不需要自己写程序,这样大大的减少了我们的工作量。提高了程序运行的安全性和可移植性,同时还提高了代码的保密性。岂不美哉!下面我就分享一些常用的封装函数,方便大家使用。

1.事件委托的封装

function eveEnt(child,cb){
			return function(eve){
				var e = eve || window.event;
				var mubiaoEle = e.target || e.srcElement;
				for(var i = 0;i<child.length;i++){
					if(child[i]==mubiaoEle){
						cb.bind(mubiaoEle)();
					}
				}
			}
		}

2.获取非行内样式的兼容:必然会得到当前的样式值

function getStyle(ele,attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }

3.运动的封装(包括透明度)

//ele代表元素,attr代表属性,target代表目标位置
function move(ele,attr,target){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            if(attr == "opacity"){
                var iNow = getStyle(ele,attr) * 100;
            }else{
            //getStyle用到了获取样式封装函数
                var iNow = parseInt(getStyle(ele,attr));
            }

            let speed = (target - iNow)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow === target){
                clearInterval(ele.t);
            }else{
                if(attr == "opacity"){
                    ele.style.opacity = (iNow + speed)/100;
                }else{
                    ele.style[attr] = iNow + speed + "px";
                }
            }
        }, 30);
    }

4.阻止事件冒泡封装

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

5.获取可视窗口大小

function view() {
    return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight|| 0
    };
}

6.随机数的封装

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

后续我会补充更多的封装函数方便大家使用,大家尽情期待哈:)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值