JS实用技巧手记 by ABen Su
JS实用技巧手记 by ABen Su
阅读(1.5k) 书签 赞(0) 我要纠错

JS实用技巧手记（五）

2018-06-17 19:26 更新

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 十六进制颜色值的随机生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function randomColor(){
var arrHex=["0","1","2","3","4","5","6","7","8","9","a","b","c","d"],
     strHex="#",
     index;
     for(var i=0;i<6;i++){
      index=Math.floor(Math.random()*14);
      strHex+=arrHex[index];
     }
return strHex;
}
console.log(randomColor());
function getRandomColor(){
    return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}
console.log(getRandomColor());

说明：

1、16777215为16进制的颜色ffffff转成10进制的数字

2、>>数字取整

3、转成16进制不足6位的以0来补充

 

2. 获取下一个结点，兼容IE和Firefox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function getNextNode(node){
      node = typeof node == "string" ? document.getElementById(node) : node;
      var nextNode = node.nextSibling;
      if(!nextNode) return null;
    if(!document.all){    
        while(true){
            if(nextNode.nodeType == 1){
                break;
            } else {
                if(nextNode.nextSibling){
                    nextNode = nextNode.nextSibling;
                } else {
                    break;
                }
            }
          }
    }  
    return nextNode;  
};
// demo:
var nextNode = getNextNode("item");   //传递当前元素id
console.log(nextNode.id);              //返回nextSibling的id

3. 设置透明度

1
2
3
4
5
6
7
8
9
10
11
function setOpacity(node, level){
    node = typeof node == "string" ? document.getElementById(node) : node;
    if (document.all){
        node.style.filter = 'alpha(opacity=' + level + ')';
    } else {
        node.style.opacity = level / 100;
    }
}
// demo:
setOpacity("test1",20);
setOpacity("test2",80);

4. Event兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
// 兼容IE和firefox的event对象
btn.onclick = function(e){
    e = window.event || e;
    //下面可以用e来做点什么事，e在IE和Firefox下都指向了event对象
}
// 兼容srcElement和target
var el = e.srcElement || e.target;
console.log(el.tagName);
// 封装getEventTarget函数
function getEventTarget(e){
    e = window.event || e;
    return e.srcElement || e.target;
}

5. 阻止冒泡，封装stopPropagation函数

1
2
3
4
5
6
7
8
9
10
11
12
function stopPropagation(e){
    e = window.event || e;
    if(document.all){
        e.cancelBubble=true;  
    } else {
          e.stopPropagation();
    }
}
// demo:
btn.onclick = function(e){
    stopPropagation(e);
}

6. 事件监听兼容函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function on(node,eventType,handler){
    node = typeof node == "string" ? document.getElementById(node) : node;
    if(document.all){
        node.attachEvent("on"+eventType,handler);  
    } else {
        node.addEventListener(eventType,handler,false);  
    }
}
// demo:
var btn = document.getElementById("btn");
on(btn,"click",function(){
    console.log(1);
});
// 增强函数
// IE下this指向window，其他浏览器指向当前元素
on = function(node,eventType,handler,scope){
  node = typeof node == "string" ? document.getElementById(node) : node;
  scope = scope || node;
  if(document.all){
    node.attachEvent("on"+eventType,function(){handler.apply(scope,arguments)});
  } else {  
    node.addEventListener(eventType,function(){handler.apply(scope,arguments)},false);
  }
}

7. 类型判断函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function isNumber(s){
    return !isNaN(s);
}
function isString(s){
    return typeof s == "string";
}
function isBoolean(s){
    return typeof s == "boolean";
}
function isFunction(s){
    return typeof s == "function";
}
function isNull(s){
    return s == null;
}
function isUndefined(s){
    return typeof s == "undefined";
}
function isEmpty(s){
    return /^\s*$/.test(s);
}
function isArray(s){
    return s instanceof Array;
}

8. getByClass、getById、getByTag

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var get={
  byId:function(id){
    return document.getElementById(id);
  },
  byClass:function(oParent,sClass){
    if(oParent.getElementsByClass){
      retuen (oParent||document).getElementsByClass(sClass);
    }else{
      var aClass=[];
      var reClass=new  RegExp("(^|)"+sClass+"( |$)");
      var aElem=this.byTag(oParent,"*");
      for(var i=0;i<aElem.length;i++){
        // reClass.test(aElem[i].className) && aClass.push(aElem[i]);
        if(reClass.test(aElem[i].className)){
          aClass.push(aElem[i]);
        }
      }
      return aClass;
    }
  },
  byTag:function(obj,elem){
    return (obj||document).getElementsByTagName(elem);
  }
}
// demo:
var oNav = get.byId("nav");
var aLi = get.byTagName("li", oNav);
var aSubNav = get.byClass("subnav", oNav);

9. getByClass

1
2
3
4
5
6
7
8
9
10
11
12
13
function getByClass(oParent, sClassName)
{
    var aElm=oParent.getElementsByTagName('*');
    var aArr=[];
    for(var i=0; i<aElm.length; i++)
    {
        if(aElm[i].className==sClassName)
        {
            aArr.push(aElm[i]);
        }
    }
    return aArr;
}

10. extend函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function extend(subClass,superClass){
var F = function(){};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
  subClass.superclass = superClass.prototype;
  if(superClass.prototype.constructor == Object.prototype.constructor){
    superClass.prototype.constructor = superClass;
  }
}
function Animal(name){
this.name = name;
this.type = "animal"
}
Animal.prototype = {
say : function(){
  alert("I'm a(an) " + this.type + " , my name is " + this.name);
}
}
function Bird(name){
  this.constructor.superclass.constructor.apply(this,arguments);
  this.type = "bird"
}
extend(Bird,Animal);
  Bird.prototype.fly = function(){
  alert("I'm flying");
}
var canary = new Bird("xiaocui");
canary.say();   // I’m a(an) bird , my name is xiaocui
canary.fly(); // I’m flying

 

以上内容是否对您有帮助：
← JS实用技巧手记（四）
原生JS实用技巧手记（六） →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号