加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > C语言 > 正文

常用javascript代码片段集锦

发布时间:2020-12-15 01:22:57 所属栏目:C语言 来源:网络整理
导读:常用方法的封装 根据类名获取DOM元素 判断是否是数字 // 方法一:正则// return /^d+$/g.test(numStr); // 方法二:使用isNaN函数,可能存在潜在问题return !isNaN(numStr); } 从数组中删除指定下标的元素 声明一个临时数组,遍历原数组并判断是否等于给出

常用方法的封装

根据类名获取DOM元素

判断是否是数字

// 方法一:正则
// return /^d+$/g.test(numStr); 

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

}

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

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

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

}

常用效果案例

标题栏跑马灯

    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);
}

走动的页面时钟

/**

  • 走动的页面时钟
    */
    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();
}

实现二:

抽签程序


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

' + val);
    if (index == 2) {
        return false; // 只能是return false
    };
});

Excel列编号转化为数字

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,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.
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);
    }

对象克隆

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



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个对象互相引用的时候就显得无力,会陷入死循环。必须使用图论算法建立拓扑关系,依次复制每个节点并重建依赖关系!

递归删除目录及文件

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

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

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

= 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;
     }
}

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

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)
}
})

parseInt方法中的小坑

parseInt(string,radix)接受2个参数,如果第一个不是数字将会调用toStirng()方法。

再补充几个悲剧

不要将 parseInt 当做转换 Number 和 Integer 的工具。

位运算的妙用

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读