>>>>> JS中二十六个通用的函数
2016-12-08 本文已影响0人
風隨風去
一、给定范围内的随机数
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';
}
}
二十六、判断输入是否为空或空格
isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
