杂七杂八

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