前端开发封装一些常用的JS函数
摘要： 前端开发的整个工作流程 web前端开发的工作时间 前端开发工作描述怎么写 //获取元素属性 function getStyle(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputed……
前端开发的整个工作流程 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
近期评论