常用方法的封装

根据类名获取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)
}
})

常用javascript代码片段集锦的更多相关文章

  1. IOS开发效率之为Xcode添加常用的代码片段

    IOS开发效率之为Xcode添加常用的代码片段 原文地址:http://blog.csdn.net/pingchangtan367/article/details/30041285 tableview ...

  2. IOS开发-OC学习-常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...

  3. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!

    原文:https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 作者:Chalaran ...

  4. 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

    原文:Chalarangelo  译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...

  5. 精心收集的48个JavaScript代码片段,仅需30秒就可理解

    源文链接 :https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates 该项目来自于 G ...

  6. 73种网页常用Javascript代码

    73种网页常用Javascript代码 转载自:前端丶灵魂工程师   1.后退 前进  <input type="button" value="后退" o ...

  7. 常用JS代码片段

    1.隐藏部分数字,如手机号码,身份证号码 1 2 3 function (str,start,length,mask_char){ return str.replace(str.substr(star ...

  8. [总结]web前端常用JavaScript代码段及知识点集锦

    DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.create ...

  9. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

随机推荐

  1. android开发之路02(浅谈BroadcastReceiver)

    一.BroadcastReceiver (广播接收者)的作用是用来接收来自系统和应用中的广播.应用如下: 1.开机完成后系统会产生一条广播----->接收到这条广播就能实现开机启动服务的功能: ...

  2. CentOS7安装和配置FTP

    1. 安装vsftpd #安装vsftpd yum install -y vsftpd #设置开机启动 systemctl enable vsftpd.service # 重启 service vsf ...

  3. 关于Apache Commons-Lang的总结

    部分转载至:http://linhongyu.blog.51cto.com/6373370/1553329 一.前言 Java码农不识Apache,敲尽一生也枉然.旗下的开源项目众多,各个都是吊炸天. ...

  4. 非XA式Spring分布式事务

    Spring应用的几种事务处理机制 Java Transaction API和XA协议是Spring常用的分布式事务机制,不过你可以选择选择其他的实现方式.理想的实现取决于你的应用程序使用何种资源,你 ...

  5. Redis的安装与使用

    一.什么 Redis REmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包 ...

  6. golang 依赖控制反转(IoC)

    主流开发语言,为了达到项目间的低耦合,都会借助IoC框架来实现.即抽象和实现分离,使用抽象层,不用关心这些抽象层的具体实现:抽象层的实现,可以独立实现.现在比较流行的领域驱动设计(ddd),为了达到将 ...

  7. Oracle12c创建新用户提示公共用户名或角色无效

    今天将备份的数据库还原到一台新的电脑上,首先要创建用户,执行如下语句: create user fxhy identified " default tablespace USERS temp ...

  8. 20160531-20160607springmvc入门

    springmvc的基础知识 什么是springmvc? springmvc框架原理(掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 springmvc入门程序 目的:对前端控制器.处理器 ...

  9. TCP/IP 学习博客

    原作者地址:http://blog.csdn.net/goodboy1881/article/category/204448

  10. 判断手机还是PC浏览器

    function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobi ...