JS实用技巧(二)

作者 BiYuqi 日期 2016-12-26
JS实用技巧(二)

该系列文章主要记录自己平常所用,js一些技巧,作为知识的积累。

1.十六进制颜色值的随机生成(2种方法)

function getColor(){
    var   arrStr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d"],
            strHas = "#",
            index;
            for(var i=0;i<6;i++){
                index = Math.floor(Math.random()*14);
                strHas += arrStr[index];
            }
    return strHas;
}
getColor();//随机颜色值

function getColor2(){
    return "#"+("000"+Math.floor(Math.random()*16777215).toString(16)).slice(-6);
}
getColor2()//随机颜色值

说明:
1、16777215为16进制的颜色ffffff转成10进制的数字
2、转成16进制不足6位的以0来补充(经测试会有不足6位的情况出现)

2.Event兼容

//兼容IE和Firefox的event对象
btn.onclick() = function(){
    e = window.event || e;
    //some code
}

//兼容srcElement和target(事件源)
var et = e.srcElement || e.target;
console.log(et.tagName);

//封装getEventTarget函数
function getEventTarget(e){
    e.window.event || e;
    return e.srcElement || e.target;
}

3.阻止冒泡,封装stopPropagation函数

function stopPropagation(e){
    e = window.event || e;
    if(document.all){
        cancelBubble = true;
    }else{
        e.stopPropagation();
    }
}
//or
function stopPropagation2(e){
    e = window.event || e;
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        cancelBubble = true;
    }
}
//demo
btn.onclick = function(e){
    stopPropagation(e);
}

document.all可以判断浏览器是否是IE;

4.添加事件监听 兼容

/*
    添加事件监听 兼容
    addEvent(elem,type,fn,choose);
    elem 需要添加事件监听的元素
    type 事件类型 一律不加on
    fn 回调函数(要做的事情)
    choose 冒泡或者捕捉 默认为false
*/
function addEvent(elem,type,fn,choose){
    if(arguments.length < 3){
        return ;
    }
    //给choose赋初值
    choose = choose || false;
    //判断浏览器是否支持addEventListener
    if(elem.addEventListener){
        elem.addEventListener(type,fn,choose);
    }else {
        elem.attachEvent('on'+type , fn , choose);
    }
}
// demo:
var btn = document.querySelector("#btn");
on(btn,"click",function(){
    console.log(888);
});

5.类型判断函数

var Tyle = (function(){
    var Type = {},
        list = ['String','Array','Object','Number','RegExp','Null'];
    for(var i=0;i<list.length;i++){
        (function(type){
            Type['is'+type] = function(obj){
                return Object.prototype.toString.call(obj) === '[object '+type+']'
            }
        })(list[i])
    }
    return Type
})()

console.log(Tyle.isArray([])) // true
console.log(Tyle.isNumber(''))    // false
console.log(Tyle.isString(''))    // true
console.log(Tyle.isObject({}))    // true
console.log(Tyle.isRegExp(/\s/))    // true
console.log(Tyle.isNull(''))    // false

6.设置透明度

function setOpacity(elem,level){
    node = typeof node == "string" ? document.getElementById(node) : node;//检测传进来node的类型
    if(document.all){
        node.style.filter = 'alpha(opacity='+level+')';
    }else{
        node.style.opacity  = level/100;
    }
}
//test
setOpacity("box1",20);
setOpacity("box2",80);