常用方法的封装
根据类名获取DOM元素
判断是否是数字
// <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>一：正则
// return /^\d+$/g.test(numStr);
// <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>二：使用isNaN<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，可能存在潜在问题
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 f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tCh,leftChs,lastCh; // 第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>字符,剩下的字符和最后<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>字符
if(dir == 'left'){
f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tCh = title.ch<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>t(0);
leftChs = title.substring(1,title.length);
document.title = leftChs + f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tCh;
} else if(dir == 'right'){
lastCh = title.ch<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>t(title.length - 1);
leftChs = title.substring(0,title.length - 1);
document.title = lastCh + leftChs;
} else {
console.error('跑马灯的方向只能是left和right');
return;
}
// console.log('当前<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>的移动方向' + 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个对象互相引用的时候就显得无力，会陷入死循环。必须使用图论算法建立拓扑关系，依次复制每个节点并重建依赖关系！
递归删除目录及文件
irsync(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);
};复制项目模板文件到指定目录
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默认生成了初始文件和项目。
判断节点是否包含另一个节点
= 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 的工具。
位运算的妙用
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
