杂七杂八

发表于 更新于 分类于 本文字数： 2.1k 阅读时长 ≈ 8 分钟

分解url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 分解URL参数
function parseQueryString(url) {
	var obj = {},
		keyvalue = [],
		key = "",
		value = "";
	var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");

	for (var i in paraString) {

		keyvalue = paraString[i].split("=");
		key = keyvalue[0];
		value = keyvalue[1];
		obj[key] = value;
	}
	return obj;
}

时间转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function dateConvert(date, format) {
	date = parseInt(date);
	var Udate = new Date(date);
	var Y = Udate.getFullYear(),
		M = Udate.getMonth() < 10 ? "0" + (Udate.getMonth() + 1) : (Udate.getMonth() + 1),
		D = Udate.getDate() < 10 ? "0" + Udate.getDate() : Udate.getDate(),
		h = Udate.getHours(),
		m = Udate.getMinutes(),
		s = Udate.getSeconds(),
		result;
	if (!format) {
		format = "Y/M/D h:m:s";
	}
	if (format.indexOf("Y") >= 0) {
		format = format.replace("Y", Y);
	}
	if (format.indexOf("M") >= 0) {
		format = format.replace("M", M);
	}
	if (format.indexOf("D") >= 0) {
		format = format.replace("D", D);
	}
	if (format.indexOf("h") >= 0) {
		format = format.replace("h", h);
	}
	if (format.indexOf("m") >= 0) {
		format = format.replace("m", m);
	}
	if (format.indexOf("s") >= 0) {
		format = format.replace("s", s);
	}
	return format;
};

返回两个日期之间的日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Returns an array of dates between the two dates
var getDates = function(startDate, endDate) {
  var dates = [],
      currentDate = startDate,
      addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      };
  while (currentDate <= endDate) {
    dates.push(currentDate);
    currentDate = addDays.call(currentDate, 1);
  }
  return dates;
};

// Usage
var dates = getDates(new Date(2013,10,22), new Date(2013,11,25));                                                                                                           
dates.forEach(function(date) {
  console.log(date);
});

获取某年某月的天数

1
2
3
4
5
function getDaysInOneMonth(year, month){  
  month = parseInt(month, 10);  
  var d= new Date(year, month, 0);  
  return d.getDate();  
}

身份证验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
function checkID(ID) {
	if (typeof ID !== 'string') return '非法字符串';
	var city = {
		11: "北京",
		12: "天津",
		13: "河北",
		14: "山西",
		15: "内蒙古",
		21: "辽宁",
		22: "吉林",
		23: "黑龙江 ",
		31: "上海",
		32: "江苏",
		33: "浙江",
		34: "安徽",
		35: "福建",
		36: "江西",
		37: "山东",
		41: "河南",
		42: "湖北 ",
		43: "湖南",
		44: "广东",
		45: "广西",
		46: "海南",
		50: "重庆",
		51: "四川",
		52: "贵州",
		53: "云南",
		54: "西藏 ",
		61: "陕西",
		62: "甘肃",
		63: "青海",
		64: "宁夏",
		65: "新疆",
		71: "台湾",
		81: "香港",
		82: "澳门",
		91: "国外"
	};
	var birthday = ID.substr(6, 4) + '/' + Number(ID.substr(10, 2)) + '/' + Number(ID.substr(12, 2));
	var d = new Date(birthday);
	var newBirthday = d.getFullYear() + '/' + Number(d.getMonth() + 1) + '/' + Number(d.getDate());
	var currentTime = new Date().getTime();
	var time = d.getTime();
	var arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
	var arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
	var sum = 0,
		i, residue;

	if (!/^\d{17}(\d|x)$/i.test(ID)) return '非法身份证';
	if (city[ID.substr(0, 2)] === undefined) return "非法地区";
	if (time >= currentTime || birthday !== newBirthday) return '非法生日';
	for (i = 0; i < 17; i++) {
		sum += ID.substr(i, 1) * arrInt[i];
	}
	residue = arrCh[sum % 11];
	if (residue !== ID.substr(17, 1)) return '非法身份证哦';

	return city[ID.substr(0, 2)] + "," + birthday + "," + (ID.substr(16, 1) % 2 ? " 男" : "女")
}

判断是移动端和IE8

1
2
window.isMobile = /mobile/i.test(window.navigator.userAgent);
window.isIE8 = /MSIE 8.0/i.test(window.navigator.userAgent);

移动端详细判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    }

让元素进入页面时自动显示在页面可视区域

1
2
3
4
5
6
7
function showElemView(elem) {
    if ($(window).scrollTop() < elem.offset().top - $(window).height()) {
        $(window).scrollTop(elem.offset().top - $(window).height() + elem.outerHeight());
    } else {
        //
    }
};

文本框根据输入内容自适应高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/*
* @param                {HTMLElement}        输入框元素
* @param                {Number}                设置光标与输入框保持的距离(默认0)
* @param                {Number}                设置最大高度(可选)
*/
function autoTextarea(elem, extra, maxHeight) {
    extra = extra || 0;
    var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
        addEvent = function(type, callback) {
            elem.addEventListener ?
                elem.addEventListener(type, callback, false) :
                elem.attachEvent('on' + type, callback);
        },
        getStyle = elem.currentStyle ? function(name) {
            var val = elem.currentStyle[name];

            if (name === 'height' && val.search(/px/i) !== 1) {
                var rect = elem.getBoundingClientRect();
                return rect.bottom - rect.top -
                    parseFloat(getStyle('paddingTop')) -
                    parseFloat(getStyle('paddingBottom')) + 'px';
            };

            return val;
        } : function(name) {
            return getComputedStyle(elem, null)[name];
        },
        minHeight = parseFloat(getStyle('height'));

    elem.style.resize = 'none';

    var change = function() {
        var scrollTop, height,
            padding = 0,
            style = elem.style;

        if (elem._length === elem.value.length) return;
        elem._length = elem.value.length;

        if (!isFirefox && !isOpera) {
            padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
        };
        scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

        elem.style.height = minHeight + 'px';
        if (elem.scrollHeight > minHeight) {
            if (maxHeight && elem.scrollHeight > maxHeight) {
                height = maxHeight - padding;
                style.overflowY = 'auto';
            } else {
                height = elem.scrollHeight - padding;
                style.overflowY = 'hidden';
            };
            style.height = height + extra + 'px';
            scrollTop += parseInt(style.height) - elem.currHeight;
            document.body.scrollTop = scrollTop;
            document.documentElement.scrollTop = scrollTop;
            elem.currHeight = parseInt(style.height);
        };
    };

    addEvent('propertychange', change);
    addEvent('input', change);
    addEvent('focus', change);
    change();
};

转换日期时间格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function dateConvert(date, format) {
    date = parseInt(date);
    var Udate = new Date(date);
    var Y = Udate.getFullYear(),
        M = Udate.getMonth() < 10 ? "0" + (Udate.getMonth() + 1) : (Udate.getMonth() + 1),
        D = Udate.getDate() < 10 ? "0" + Udate.getDate() : Udate.getDate(),
        h = Udate.getHours(),
        m = Udate.getMinutes(),
        s = Udate.getSeconds(),
        result;

    if (!format) {
        format = "Y/M/D h:m:s";
    }

    if (format.indexOf("Y") >= 0) {
        format = format.replace("Y", Y);
    }
    if (format.indexOf("M") >= 0) {
        format = format.replace("M", M);
    }
    if (format.indexOf("D") >= 0) {
        format = format.replace("D", D);
    }
    if (format.indexOf("h") >= 0) {
        format = format.replace("h", h);
    }
    if (format.indexOf("m") >= 0) {
        format = format.replace("m", m);
    }
    if (format.indexOf("s") >= 0) {
        format = format.replace("s", s);
    }

    return format;
};

产生介于两个数之间的随机数

取整数

取整数，并且包含最小值和最大值

1
2
3
4
5
function randomNum(minNum,maxNum) {
    var nums = maxNum - minNum;
    var num = Math.floor(Math.random() * nums + minNum);
    return num;
}

任意值

取两书之间任意值，不包含最小值和最大值

1
2
3
4
5
function randomNum(minNum,maxNum) {
    var nums = maxNum - minNum;
    var num = Math.random() * nums + minNum;
    return num;
}

保留指定小数位数

保留digits位小数

1
2
3
4
5
function randomNum(minNum,maxNum,digits) {
    var nums = maxNum - minNum;
    var num = Math.floor(Math.random() * nums + minNum).toFixed(digits);
    return num;
}

js下载文件

1
2
3
4
5
6
function download() {
    var $form = $('<form method="GET"></form>');
    $form.attr('action', '/download/papers/1');
    $form.appendTo($('body'));
    $form.submit();
}

iframe 获取内部元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<iframe class="viewbord" src="" frameborder="0"></iframe>
<iframe class="music" src="" frameborder="0"></iframe>
<script>
    var bord = document.getElementsByClassName('viewbord')[0];
    bord.style.height = document.body.clientHeight + 'px';
    bord.style.width = document.body.clientWidth + 'px';
    bord.addEventListener('load', function() {
        document.title = document.getElementsByClassName('viewbord')[0].contentWindow.document.title;

        var simUrl = document.getElementsByClassName('viewbord')[0].contentWindow.document.getElementsByClassName('chris-txt-box')[0]

        if (simUrl) {
            simUrl.onclick = function(e) {
                window.location.href = simUrl.getAttribute('href')
            }
        }
    });
</script>

IE8 input不支持placeholder处理办法

1
<input type="text" onblur="if (this.value == '') {this.value = '省份';}" onfocus="if (this.value == '省份') {this.value = '';}" value="省份" >

深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//利用递归来实现深拷贝，如果对象属性的值是引用类型（Array,Object），那么对该属性进行深拷贝，直到遍历到属性的值是基本类型为止。  
function deepClone(obj) {    
  if(!obj || typeof obj!== 'object') {      
    return;    
  }    
  var newObj= obj.constructor === Array ? [] : {};    
  for(var key in obj){       
    if(obj.hasOwnProperty(key)) {
      if(obj[key] && typeof obj[key] === 'object') {  
        //递归
        newObj[key] = deepClone(obj[key]);          
      }else {
        newObj[key] = obj[key];         
      }       
    }    
  }    
  return newObj;
}

webpack兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new webpack.optimize.UglifyJsPlugin({
  mangle: {
      // mangle options, if any
  },
  mangleProperties: {
    screw_ie8: false,
    //ignore_quoted: true,      // do not mangle quoted properties and object keys
  },
  compress: {
    screw_ie8: false,
    //properties: false // optional: don't convert foo["bar"] to foo.bar
  },
  output: {
    screw_ie8: false         
  }
})

H5播放音乐控制

1
2
3
4
<audio id="bgMusic" autoplay="autoplay" loop="loop">
    <source src="Venice_Beach.mp3" type="audio/mp3">
</audio>
<img class="bgMusicControl rotate play" src="//img.dxycdn.com/biz/topic_files/biz/invitation/dist/images/music.png">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bgMusicControl {
    @keyframes rotate {
        from {}
        to {
            transform: rotate(360deg);
        }
    }
    width: .5rem;
    border-radius: 100%;
    position: absolute;
    right: .3rem;
    top: .2rem;
    z-index: 1000;
    &.rotate {
        animation: rotate 5s linear infinite;
    }
}

自动播放

1
2
3
4
5
6
var audio = document.getElementById("bgMusic");
audio.play();
// 兼容微信
document.addEventListener("WeixinJSBridgeReady", function() {
    audio.play();
}, false);

播放、暂停控制

1
2
3
4
5
6
7
8
9
10
11
12
$('.bgMusicControl').click(function() {
    var _ = $(this)
    if (_.hasClass('play')) {
        audio.pause();
        _.removeClass('play').addClass('pause')
        _.removeClass('rotate')
    } else {
        audio.play();
        _.removeClass('pause').addClass('play')
        _.addClass('rotate')
    }
})

.gitignore规则不生效解决办法

原因是.gitignore只能忽略那些原来没有被track的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。那么解决方法就是先把本地缓存删除（改变成未track状态），然后再提交

1
2
3
git rm -r --cached .
git add .
git commit -m 'update .gitignore'

判断是否是iPhoneX

1
var isIphoneX = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
1
2
3
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3) {

}

微信点击触发颜色块

1
-webkit-tap-highlight-color:rgba(0,0,0,0)

sleep函数

1
2
3
4
5
6
7
8
9
10
11
async function test() {
  console.log('Hello')
  await sleep(1000)
  console.log('world!')
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

test()

斐波那契数列第N项

循环

1
2
3
4
5
6
7
8
9
10
11
function fibonacci (n) {
  let n1 = 1
  let n2 = 1
  let sum = 1
  for (let i = 3; i <= n; i++) {
    sum = n1 + n2
    n1 = n2
    n2 = sum
  }
  return sum
}

递归

1
2
3
4
5
6
7
var fibonacci = function (n){
  if(n<=2){
    return 1;
  }
  return fibonacci(n-1) + fibonacci(n-2);  
}
console.log(fibonacci(5));

memoization方案进行优化

memoization方案在《JavaScript模式》和《JavaScript设计模式》都有提到。memoization是一种将函数执行结果用变量缓存起来的方法。当函数进行计算之前，先看缓存对象中是否有次计算结果，如果有，就直接从缓存对象中获取结果；如果没有，就进行计算，并将结果保存到缓存对象中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let fibonacci = (function () {
  let memory = {}
  return function (n) {
    if (memory[n] !== undefined) {
      return memory[n]
    }
    if (n <= 2) {
      memory[n] = 1
    } else {
      memory[n] = fibonacci(n - 1) + fibonacci(n - 2)
    }
    return memory[n]
  }
})()

ES6

1
2
3
4
5
6
7
8
9
10
11
const fibonacci = (n) => {
  let a = 0
  let b = 1
  let i = 1

  while (i++ <= n) {
    [a, b] = [b, a + b]
  }
  return a
}
console.log(fibonacci(6))

postMessage使iframe高度自适应

parent

1
2
3
4
window.addEventListener('message',function(e){
  var height = e.data;
  $('').css("height", height);
}, false);

child

1
2
var height = $(document.body).height();
window.parent.postMessage(height, "*");

getScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const getScript = (url, callback) => {
  var script = document.createElement('script')
  if (typeof (callback) !== 'undefined') {
    if (script.readyState) {
      script.onreadystatechange = function () {
        if (script.readyState === 'loaded' || script.readyState === 'complete') {
          script.onreadystatechange = null
          callback()
        }
      }
    } else {
      script.onload = function () {
        callback()
      }
    }
  }
  script.src = url
  document.body.appendChild(script)
}

柯里化

实现：

1
var a = add(2)(3)(4); //9

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
function add () {
  let args = [...arguments]

  let fn = function () {
    let args1 = [...arguments]
    return add.apply(null, args.concat(args1))
  }

  fn.toString = fn.valueOf = function () {
    return args.reduce((res, item) => res + item)
  }
  return fn
}

方法二

1
2
3
4
5
6
7
8
9
10
11
12
function add () {
  let res = [...arguments][0]
  let fn = function () {
    res += [...arguments][0]
    return fn
  }

  fn.toString = fn.valueOf = function () {
    return res
  }
  return fn
}

进制转换

1
2
3
4
5
6
//十进制转其他
var x=110;
console.log(x);
console.log(x.toString(8));
console.log(x.toString(32));
console.log(x.toString(16));
1
2
3
4
5
//其他转十进制
var x='110';
console.log(parseInt(x,2));
console.log(parseInt(x,8));
console.log(parseInt(x,16));
1
2
//其他转其他
//先用parseInt转成十进制再用toString转到目标进制

下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
export const getBlob = (url: string) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.response)
      } else {
        reject('发生错误')
      }
    }
    xhr.onerror = function() {
      reject('发生错误')
    }
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.send()
  })
}

export const saveAs = (blob, filename) => {
  const link = document.createElement('a')
  const body = document.querySelector('body')

  link.href = window.URL.createObjectURL(blob)
  link.download = filename

  // fix Firefox
  link.style.display = 'none'
  body && body.appendChild(link)

  link.click()
  body && body.removeChild(link)

  window.URL.revokeObjectURL(link.href)
}

getBlob(
  // 浏览器有缓存的情况下会导致下载失败，所以需要添加时间戳
  args.add(imgUrl, {
    time: Date.now(),
  })
)
  .then((blob) => {
    const fileName = `filename.png`;
    saveAs(blob, fileName);
  })