找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发封装一些常用的JS函数

2018-09-29 23:05:04 分类：JavaScript 阅读(138) 评论(0)
前端开发的整个工作流程 web前端开发的工作时间 前端开发工作描述怎么写
//获取元素属性
function getStyle(obj, attr) {
    return obj.currentStyle
        ? obj.currentStyle[attr]
        : getComputedStyle(obj, 0)[attr]
}
//运动函数
function doMove(obj, attr, speed, target, endFn) {
    clearInterval(obj.timer)
    speed = parseInt(getStyle(obj, attr)) < target ? speed : -speed
    //alert(speed);
    obj.timer = setInterval(function() {
        var curPosition = parseInt(getStyle(obj, attr)) + speed
        if (
            (curPosition > target && speed > 0) ||
            (curPosition < target && speed < 0)
        )
            curPosition = target
        obj.style[attr] = curPosition + ‘px’
        if (curPosition == target) {
            clearInterval(obj.timer)
            endFn && endFn()
        }
    }, 50)
}
//抖动函数
//透明度渐变函数
//需找与数组相等的值函数
function arrIndexOf(arr, v) {
    for (i = 0; i < arr.length; i++) {
        if (arr[i] == v) {
            return i //返回与目标值相等的数组的下标值
        }
    }
    return -1
}
//getElementByClassName函数
function getElementByClassName(parent, tagName, className) {
    var aEls = parent.getElementsByTagName(tagName)
    var arr = []
    for (var i = 0; i < aEls.length; i++) {
        var arrClassName = aEls[i].className.split(‘ ‘)
        var _index = arrIndexOf(arrClassName, className)
        if (_index != -1) {
            arr.push(aEls[i])
        }
    }
    return arr
}
//addClass函数
function addClass(obj, className) {
    if (obj.className == ”) {
        //如果原来没有class
        obj.className = className
    } else {
        var arrClassName = obj.className.split(‘ ‘)
        var _index = arrIndexOf(arrClassName, className)
        if (_index == -1) {
            //如果要添加的class在原来的class中不存在
            obj.className += ‘ ‘ + className
        }
        //如果要添加的class在原来的class中存在,则不需要做任何事
    }
}
//removeClass函数
function removeClass(obj, className) {
    //如果原来有class
    if (obj.className != ”) {
        var arrClassName = obj.className.split(‘ ‘)
        var _index = arrIndexOf(arrClassName, className)
        if (_index != -1) {
            arrClassName.splice(_index, 1) //删除需要删除的calss
            obj.className = arrClassName.join(‘ ‘) //然后将arrClassName数组拼接起来
        }
    }
}
//绑定事件函数
function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false)
    } else {
        obj.attachEvent(‘on’ + evname, function() {
            fn.call(obj)
            //fn()==fn.call() call(第一个参数,第二个参数) call函数可以改变函数this的指向,call函数传入的第一个参数就是改变this指向的值,call的第二第三个参数就是原函数的参数
        })
    }
}
//鼠标在可视区域内的拖拽 不兼容非标准IE
function clientDrag(obj) {
    obj.onmousedown = function(ev) {
        ev = ev || event
        var ms_b = ev.clientX – obj.offsetLeft
        var ms_t = ev.clientY – obj.offsetTop
        document.onmousemove = function(ev) {
            ev = ev || event
            var currX = ev.clientX – ms_b
            var currY = ev.clientY – ms_t
            var Width =
                document.body.clientWidth || document.documentElement.cilentWidth
            var Height =
                document.body.clientHeight || document.documentElement.cilentHeight
            if (currX < 0) {
                currX = 0
            } else if (currX > Width – obj.clientWidth) {
                currX = Width – obj.clientWidth
            }
            if (currY < 0) {
                currY = 0
            } else if (currY > Height – obj.clientHeight) {
                currY = Height – obj.clientHeight
            }
            obj.style.left = currX + ‘px’
            obj.style.top = currY + ‘px’
            return false
        }
        document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null
        }
    }
}
2018前端开发找工作 前端开发工作展望 前端开发工作流程
» 本文来自：前端开发者 » 《前端开发封装一些常用的JS函数》
» 本文链接地址：https://www.rokub.com/5944.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论