常用javascript代码片段集锦

常用方法的封装

根据类名获取DOM元素

var $$ = function (className, element) { 
    if (document.getElementsByClassName) { 
        return (element || document).getElementsByClassName(className); 
    }
    var nodes = (element || document).getElementsByTagName('*'),
    elements = [], 
    len = nodes.length, 
    i, 
    j, 
    currentNode, 
    classNames, 
    classLength; 
    for (i = 0; i < len; i++) {
         currentNode = nodes[i]; 
         classNames = currentNode.className.split(' '); 
         classLength = classNames.length;
         for (j = 0 ; j < classLength; j++) {
             if (classNames[j] === className) { 
                 elements.push(currentNode); 
                 break; 
             } 
         } 
    } 
    return elements; 
}

判断是否是数字

function isNum (numStr) {
                        
    // 方法一：正则
    // return /^d+$/g.test(numStr); 

    // 方法二：使用isNaN函数，可能存在潜在问题
    return !isNaN(numStr);
}

从数组中删除指定下标的元素

声明一个临时数组，遍历原数组并判断是否等于给出的索引，如果相等则跳过本次循环；否则将其压入临时数组。

/**
 * 从数组中删除指定下标的元素(返回的是新的数组并不影响原来的数组)
 */

function deleteElement (index,arr) {
    
    var content = [];
    for (var i = 0; i < arr.length; i++) {
        if(index == i){
            continue;
        }
        content.push(arr[i]);
    }
    return content;
}

常用效果案例

标题栏跑马灯

// 标题栏实现跑马灯效果（可指定方向left,right）
var marqueeTitle = function(dir){

        var title = document.title;

        var firstCh,leftChs,lastCh;    // 第一个字符,剩下的字符和最后一个字符

        if(dir == 'left'){
            firstCh = title.charAt(0);
            leftChs = title.substring(1,title.length);
            document.title = leftChs + firstCh;
        } else if(dir == 'right'){
            lastCh = title.charAt(title.length - 1);
            leftChs = title.substring(0,title.length - 1);
            document.title = lastCh + leftChs;
        } else {
            console.error('跑马灯的方向只能是left和right');
            return;
        }
        // console.log('当前文字的移动方向' + dir + ',' + document.title);
}

window.onload = function(){
    // 标题栏跑马灯（注意带参的函数应该使用引号）
    setInterval('marqueeTitle("right")',500);
}

走动的页面时钟

/**
 * 当时钟数字不足2位数时补0
 */
function checkTime(i) {
    return i < 10 ? '0' + i : i;
}

/**
 * 走动的页面时钟
 */
function timeDate(){

    var now = new Date(),

        year = now.getFullYear(),
        month = now.getMonth() + 1,
        day = now.getDate(),
        h = checkTime(now.getHours()),
        m = checkTime(now.getMinutes()),
        s = checkTime(now.getSeconds()),
        weekday = '星期' + '日一二三四五六'.charAt(now.getDay());

    getDOMById('time').innerHTML =  year + "年" + month + "月" + day + "日 " + weekday + h + ":" + m + ":" + s;

    setTimeout(timeDate,1000);
}

window.onload = function(){
    timeDate();
}

抽签程序

<button id="select">抽签</button>
<script>
    /**
     * 从数组中删除指定下标的元素(返回的是新的数组并不影响原来的数组)
     */
    function deleteElement (index,arr) {
        
        var content = [];
        for (var i = 0; i < arr.length; i++) {
            if(index == i){
                continue;
            }
            content.push(arr[i]);
        }
        return content;
    }

    var data = [
            {"no":1,"name":'张三'},
            {"no":2,"name":'李四'},
            {"no":3,"name":'王五'},
            {"no":4,"name":'赵六'},
            {"no":5,"name":'孙七'}
        ];

    console.info(data);
    var tmp = data;
    document.getElementById('select').onclick = function (){
        content = deleteElement(Math.floor(Math.random() * tmp.length),tmp);
        tmp = content;
        console.log(content);

    };
</script>

跳出$.each()遍历使用return false

$.each(arr, function(index, val) {
    console.log(index + '-->' + val);
    if (index == 2) {
        return false; // 只能是return false
    };
});

Excel列编号转化为数字

/**
 * 将excel列转化为数字：A-->1,B-->2,AA-->27
 */
function convertColNumToInt(sHex) {
    
    const START = 'A'.charCodeAt(0) - 1;
    const RADIX = 26;
    var ret = 0;
    for(let i = 0;i < sHex.length;i++){
        ret *= RADIX;
        ret += sHex.charCodeAt(i) - START;
    } 
    return ret;
} 

// 法2
/**
 * 将excel列转化为数字：A-->1,B-->2,AA-->27
 *
 * hash表存放
 * A => 1,B => 2,...Z => 26
 */
function convertColNumToInt(sHex) {
    
    const RADIX = 26;
    let m = new Map();
    for(let i = 1;i <= 26;i++){
        m.set(String.fromCodePoint(64+i),i);
    }

    let ret = 0;
    for(let i = 0;i < sHex.length;i++){
        ret *= RADIX;
        ret += m.get(sHex.charAt(i));
    } 
    return ret;
} 

判断2个数组是否相似

具体需求如下：

• 数组中的成员类型相同，顺序可以不同。例如[1, true] 与 [false, 2]是相似的。

• 数组的长度一致。

• 类型的判断范围，需要区分:String, Boolean, Number, undefined, null, 函数，日期, window.

function arraysSimilar(arr1, arr2) {

    if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
        return false;
    }
    var t1 = [],
        t2 = [];
    // 依次取得2个数组中的元素类型并放入新的数组    
    for (var i = 0; i < arr1.length; i++) {
        t1.push(typeOf(arr1[i]));
        t2.push(typeOf(arr2[i]));
    }
    // 排序
    t1.sort();
    t2.sort();
    // 比较排序后序列化的字符串
    return t1.join() === t2.join();
}

/**
 * 得到元素的类型
 *
 * 单独判断null主要是兼容低版本IE
 */
function typeOf(element) {
    return null === element ? "[object Null]" : Object.prototype.toString.call(element);
}

对象克隆

基本思路是逐个枚举属性，如果属性是对象，则进行递归处理。

Object.prototype.clone = function() {
    var newObj = {};
    for(var i in this){
        if(typeof(this[i]) == 'object' || typeof(this[i] == 'function')){
            newObj[i] = this[i].clone();
        } else {
            newObj[i] = this[i];
        }
    }
    return newObj;
}

Array.prototype.clone = function() {
    var newArr = [];
    if(typeof(this[i]) == 'object' || typeof(this[i]) == 'function'){
        newArr[i] = this[i].clone();
    } else {
        newArr[i] = this[i];
    }
    return newArr;
}

Function.prototype.clone = function() {
    var _this = this;
    var newFunc = function () {
        return _this.apply(this, arguments);
    };
    for(var i in this){
        newFunc[i] = this[i];
    }
    return newFunc;
}

上面的代码在绝大多数情况下有效，但是当2个对象互相引用的时候就显得无力，会陷入死循环。必须使用图论算法建立拓扑关系，依次复制每个节点并重建依赖关系！

递归删除目录及文件

// rmdir -r
var rmdir = function(dir) {
  var list = fs.readdirSync(dir);
  for (var i = 0; i < list.length; i++) {
    var filename = path.join(dir, list[i]);
    var stat = fs.statSync(filename);
    if (filename === "." || filename === "..") {} else if (stat.isDirectory()) {
      rmdir(filename);
    } else {
      fs.unlinkSync(filename);
    }
  }
  fs.rmdirSync(dir);
};

复制项目模板文件到指定目录

function copy(origin, target) {
  if(!fs.existsSync(origin)) {
    abort(origin + 'does not exist.');
  }
  if(!fs.existsSync(target)) {
    mkdir(target);
    console.log('   create : '.green + target);
  }
  fs.readdir(origin, function(err, datalist) {
    if(err) {
      abort(FILEREAD_ERROR);
    }
    for(var i = 0; i < datalist.length; i++) {
      var oCurrent = path.resolve(origin, datalist[i]);
      var tCurrent = path.resolve(target, datalist[i]);
      if(fs.statSync(oCurrent).isFile()) {
        fs.writeFileSync(tCurrent, fs.readFileSync(oCurrent, ''), '');
        console.log('   create : '.green + tCurrent);
      } else if(fs.statSync(oCurrent).isDirectory()) {
        copy(oCurrent, tCurrent);
      }
    }
  });
}

以上的程序常用于项目的初始化，例如express init默认生成了初始文件和项目。

判断节点是否包含另一个节点

function contains(refNode, otherNode){
    if (typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >= 522)){ 
         return refNode.contains(otherNode);
  } else if (typeof refNode.compareDocumentPosition == "function"){ 
         return !!(refNode.compareDocumentPosition(otherNode) & 16);
     } else { 
          var node = otherNode.parentNode;
          do {
               if (node === refNode){
                        return true; 
                } else {
                     node = node.parentNode;
                } 
          } while (node !== null);     
          return false;
     }
}

页面失去焦点触发标题栏切换

'use strict'

let originTitile = document.title
let timer;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        document.title = "(つェ⊂)赶快回来玩游戏啦"
        clearTimeout(timer);
    } else {
        document.title = '(*´∇｀*) 欢迎回来继续游戏 ' + originTitile
        timer = setTimeout(function () {
            document.title = OriginTitile
        }, 3000)
    }
})