常用函数
1. static: 检测数据是不是除了symbol外的原始数据
function isStatic(value) {
return (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null)
}
2. isPrimitive:检测数据是不是原始数据
function isPrimitive(value) {
return isStatic(value) || typeof value === 'symbol'
}
3. isObject:判断数据是不是引用类型的数据 (例如: arrays, functions, objects, regexes, new Number(0),以及 new String(''))
function isObject(value) {
let type = typeof value;
return value != null && (type == 'object' || type == 'function');
}
4. isObjectLike: 检查 value 是否是 类对象,如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"
function isObjectLike(value) {
return value != null && typeof value == 'object';
}
5. getRawType:获取数据类型,返回结果为 Number、String、Object、Array等
function getRawType(value) {
return Object.prototype.toString.call(value).slice(8, -1)
}//getoRawType([]) ==> Array
6. isPlainObject:判断数据是不是Object类型的数据
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}
7. isArray:判断数据是不是数组类型的数据
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]'
}
将isArray挂载到Array上
Array.isArray = Array.isArray || isArray;
8. isRegExp:判断数据是不是正则对象
function isRegExp(value) {
return Object.prototype.toString.call(value) === '[object RegExp]'
}
9. isDate:判断数据是不是时间对象
function isDate(value) {
return Object.prototype.toString.call(value) === '[object Date]'
}
10. isNative:判断 value 是不是浏览器内置函数
内置函数toString后的主体代码块为 [native code] ,而非内置函数则为相关代码,所以非内置函数可以进行拷贝(toString后掐头去尾再由Function转)
function isNative(value) {
return typeof value === 'function' && /native code/.test(value.toString())
}
11. isFunction:检查 value 是不是函数
function isFunction(value) {
return Object.prototype.toString.call(value) === '[object Function]'
}
12.isLength:检查 value 是否为有效的类数组长度
function isLength(value) {
return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER;
}
13. isArrayLike:检查 value 是否是类数组
如果一个值被认为是类数组,那么它不是一个函数,并且value.length是个整数,大于等于 0,小于或等于 Number.MAX_SAFE_INTEGER。这里字符串也将被当作类数组。
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
14.isEmpty:检查 value 是否为空
如果是null,直接返回true;如果是类数组,判断数据长度;如果是Object对象,判断是否具有属性;如果是其他数据,直接返回false(也可改为返回true)
function isEmpty(value) {
if (value == null) { return true; }
if (isArrayLike(value)) { return !value.length; }
else if(isPlainObject(value)){
for (let key in value) {
if (hasOwnProperty.call(value, key)) {
return false;
}
}
}
return false;
}
15. cached: 记忆函数: 缓存函数的运算结果
function cached(fn) {
let cache = Object.create(null);
return function cachedFn(str) {
let hit = cache[str];
return hit || (cache[str] = fn(str))
}
}
16. camelize: 横线转驼峰命名
let camelizeRE = /-(w)/g;function camelize(str) {
return str.replace(camelizeRE, function(_, c) { return c ? c.toUpperCase() : '';
})
}//ab-cd-ef ==> abCdEf//使用记忆函数let _camelize = cached(camelize)
17. hyphenate:驼峰命名转横线命名: 拆分字符串,使用 - 相连,并且转换为小写
let hyphenateRE = /B([A-Z])/g;function hyphenate(str) { return str.replace(hyphenateRE, '-$1').toLowerCase()
}//abCd ==> ab-cd//使用记忆函数let _hyphenate = cached(hyphenate);
18.capitalize:字符串首位大写
function capitalize(str){
return str.charAt(0).toUpperCase() + str.slice(1)
}
// abc ==> Abc//使用记忆函数let _capitalize = cached(capitalize)
19. extend:将属性混合到目标对象中
function extend(to, _from) {
for(let key in _from) {
to[key] = _from[key];
}
return to
}
20. Object.assign: 对象属性复制,浅拷贝
Object.assign = Object.assign || function(){ if(arguments.length == 0) throw new TypeError('Cannot convert undefined or null to object');
let target = arguments[0],
args = Array.prototype.slice.call(arguments, 1), key args.forEach(function(item){
for(key in item){
item.hasOwnProperty(key) && ( target[key] = item[key] )
}
})
return target
}
使用Object.assign可以浅克隆一个对象:
let clone = Object.assign({}, target)
简单的深克隆可以使用JSON.parse()和JSON.stringify(),这两个api是解析json数据的,所以只能解析除symbol外的原始类型及数组和对象
let clone = JSON.parse( JSON.stringify(target) )
21. clone: 克隆数据,可深度克隆
这里列出了原始类型,时间、正则、错误、数组、对象的克隆规则,其他的可自行补充
function clone(value, deep){
if(isPrimitive(value)){ return value }
if (isArrayLike(value)) {
//是类数组
value = Array.prototype.slice.call(value)
return value.map(item => deep ? clone(item, deep) : item)
}else if(isPlainObject(value)){ //是对象
let target = {}, key;
for (key in value) {
value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], deep) : value[key] )
}
}
let type = getRawType(value)
switch(type){
case 'Date':
case 'RegExp':
case 'Error': value = new window[type](value);
break;
}
return value
}
22. 识别各种浏览器及平台
//运行环境是浏览器
let inBrowser = typeof window !== 'undefined';
//运行环境是微信
let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
//浏览器 UA 判断
let UA = inBrowser && window.navigator.userAgent.toLowerCase();
let isIE = UA && /msie|trident/.test(UA);
let isIE9 = UA && UA.indexOf('msie 9.0') > 0;
let isEdge = UA && UA.indexOf('edge/') > 0;
let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');
let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');
let isChrome = UA && /chrome/d+/.test(UA) && !isEdge;
23. getExplorerInfo: 获取浏览器信息
function getExplorerInfo() {
let t = navigator.userAgent.toLowerCase();
return 0 <= t.indexOf("msie") ? { //ie < 11
type: "IE",
version: Number(t.match(/msie ([d]+)/)[1])
} : !!t.match(/trident/.+?rv:(([d.]+))/) ? {
// ie 11
type: "IE",
version: 11
} : 0 <= t.indexOf("edge") ? {
type: "Edge",
version: Number(t.match(/edge/([d]+)/)[1])
} : 0 <= t.indexOf("firefox") ? {
type: "Firefox",
version: Number(t.match(/firefox/([d]+)/)[1])
} : 0 <= t.indexOf("chrome") ? {
type: "Chrome",
version: Number(t.match(/chrome/([d]+)/)[1])
} : 0 <= t.indexOf("opera") ? {
type: "Opera",
version: Number(t.match(/opera.([d]+)/)[1])
} : 0 <= t.indexOf("Safari") ? {
type: "Safari",
version: Number(t.match(/version/([d]+)/)[1])
} : {
type: t,
version: -1
}
}
24. isPCBroswer: 检测是否为PC端浏览器模式
function isPCBroswer() {
let e = navigator.userAgent.toLowerCase(),
t = "ipad" == e.match(/ipad/i),
i = "iphone" == e.match(/iphone/i),
r = "midp" == e.match(/midp/i),
n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i),
a = "ucweb" == e.match(/ucweb/i),
o = "android" == e.match(/android/i),
s = "windows ce" == e.match(/windows ce/i),
l = "windows mobile" == e.match(/windows mobile/i);
return !(t || i || r || n || a || o || s || l)
}
25. unique: 数组去重,返回一个新数组
function unique(arr) {
if (!isArrayLink(arr)) { //不是类数组对象
return arr
}
let result = []
let objarr = []
let obj = Object.create(null) arr.forEach(item => {
if (isStatic(item)) {
//是除了symbol外的原始数据
let key = item + '_' + getRawType(item);
if (!obj[key]) {
obj[key] = true result.push(item)
}
} else {
// 引用类型及symbol
if (!objarr.includes(item)) {
objarr.push(item) result.push(item)
}
}
}) return resulte
}
26. Set简单实现
window.Set = window.Set || (function () {
function Set(arr) {
this.items = arr ? unique(arr) : [];
this.size = this.items.length;
// Array的大小
}
Set.prototype = {
add: function (value) { // 添加元素,若元素已存在,则跳过,返回 Set 结构本身。
if (!this.has(value)) {
this.items.push(value);
this.size++;
}
return this;
},
clear: function () { //清除所有成员,没有返回值。
this.items = [] this.size = 0
},
delete: function (value) { //删除某个值,返回一个布尔值,表示删除是否成功。
return this.items.some((v, i) => {
if (v === value) {
this.items.splice(i, 1) return true
}
return false
})
},
has: function (value) {
//返回一个布尔值,表示该值是否为Set的成员。
return this.items.some(v => v === value)
},
values: function () {
return this.items
},
}
return Set;
}());
27. repeat: 生成一个重复的字符串,有n个str组成,可修改为填充为数组等
function repeat(str, n) {
let res = '';
while (n) {
if (n % 2 === 1) {
res += str;
}
if (n > 1) {
str += str;
}
n >>= 1;
}
return res
}; //repeat('123',3) ==> 123123123
28. dateFormater: 格式化时间
function dateFormater(formater, t) {
let date = t ? new Date(t) : new Date(),
Y = date.getFullYear() + '',
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds();
return formater.replace(/YYYY|yyyy/g, Y).replace(/YY|yy/g, Y.substr(2, 2)).replace(/MM/g, (M < 10 ? '0' : '') + M).replace(
/DD/g, (D < 10 ? '0' : '') + D).replace(/HH|hh/g, (H < 10 ? '0' : '') + H).replace(/mm/g, (m < 10 ? '0' :
'') + m).replace(/ss/g, (s < 10 ? '0' : '') + s)
} // dateFormater('YYYY-MM-DD HH:mm', t) ==> 2019-06-26 18:30// dateFormater('YYYYMMDDHHmm', t) ==> 201906261830
29. dateStrForma: 将指定字符串由一种时间格式转化为另一种
from的格式应对应str的位置
function dateStrForma(str, from, to) {
str += ''
let Y = ''
if (~(Y = from.indexOf('YYYY'))) {
Y = str.substr(Y, 4) to = to.replace(/YYYY|yyyy/g, Y)
} else if (~(Y = from.indexOf('YY'))) {
Y = str.substr(Y, 2) to = to.replace(/YY|yy/g, Y)
}
let k, i['M', 'D', 'H', 'h', 'm', 's'].forEach(s => {
i = from.indexOf(s + s) k = ~i ? str.substr(i, 2) : ''
to = to.replace(s + s, k)
}) return to
}
30. getPropByPath: 根据字符串路径获取对象属性 : 'obj[0].count'
function getPropByPath(obj, path, strict) { let tempObj = obj; path = path.replace(/[(w+)]/g, '.$1'); //将[0]转化为.0 path = path.replace(/^./, ''); //去除开头的.
let keyArr = path.split('.'); //根据.切割 let i = 0; for (let len = keyArr.length; i < len - 1; ++i) { if (!tempObj && !strict) break; let key = keyArr[i]; if (key in tempObj) { tempObj = tempObj[key]; } else { if (strict) { //开启严格模式,没找到对应key值,抛出错误 throw new Error('please transfer a valid prop path to form item!'); } break; } } return { o: tempObj, //原始数据 k: keyArr[i], //key值 v: tempObj ? tempObj[keyArr[i]] : null // key值对应的值 };
};
31. GetUrlParam: 获取Url参数,返回一个对象
function GetUrlParam() {
let url = document.location.toString();
let arrObj = url.split("?");
let params = Object.create(null) if (arrObj.length > 1) {
arrObj = arrObj[1].split("&");
arrObj.forEach(item => {
item = item.split("=");
params[item[0]] = item[1]
})
}
return params;
} // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
32. downloadFile: base64数据导出文件,文件下载
function downloadFile(filename, data) {
let DownloadLink = document.createElement('a');
if (DownloadLink) {
document.body.appendChild(DownloadLink);
DownloadLink.style = 'display: none';
DownloadLink.download = filename;
DownloadLink.href = data;
if (document.createEvent) {
let DownloadEvt = document.createEvent('MouseEvents');
DownloadEvt.initEvent('click', true, false);
DownloadLink.dispatchEvent(DownloadEvt);
} else if (document.createEventObject) DownloadLink.fireEvent('onclick');
else if (typeof DownloadLink.onclick == 'function') DownloadLink.onclick();
document.body.removeChild(DownloadLink);
}
}
33. toFullScreen: 全屏
function toFullScreen() {
let elem = document.body;
elem.webkitRequestFullScreen ? elem.webkitRequestFullScreen() : elem.mozRequestFullScreen ? elem.mozRequestFullScreen() :
elem.msRequestFullscreen ? elem.msRequestFullscreen() : elem.requestFullScreen ? elem.requestFullScreen() :
alert("浏览器不支持全屏");
}
34. exitFullscreen: 退出全屏
function exitFullscreen() {
let elem = parent.document;
elem.webkitCancelFullScreen ? elem.webkitCancelFullScreen() : elem.mozCancelFullScreen ? elem.mozCancelFullScreen() :
elem.cancelFullScreen ? elem.cancelFullScreen() : elem.msExitFullscreen ? elem.msExitFullscreen() : elem.exitFullscreen ?
elem.exitFullscreen() : alert("切换失败,可尝试Esc退出");
}
35. requestAnimationFrame: window动画
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { //为了使setTimteout的尽可能的接近每秒60帧的效果
window.setTimeout(callback, 1000 / 60);
};
window.cancelAnimationFrame = window.cancelAnimationFrame || Window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame ||
window.msCancelAnimationFrame || window.oCancelAnimationFrame || function (id) { //为了使setTimteout的尽可能的接近每秒60帧的效果
window.clearTimeout(id);
}
36. _isNaN: 检查数据是否是非数字值
原生的isNaN会把参数转换成数字(valueof),而null、true、false以及长度小于等于1的数组(元素为非NaN数据)会被转换成数字,这不是我想要的。Symbol类型的数据不具有valueof接口,所以isNaN会抛出错误,这里放在后面,可避免错误
function _isNaN(v){
return !(typeof v === 'string' || typeof v === 'number') || isNaN(v)
}
37. max: 求取数组中非NaN数据中的最大值
function max(arr){
arr = arr.filter(item => !_isNaN(item))
return arr.length ? Math.max.apply(null, arr) : undefined
}
//max([1, 2, '11', null, 'fdf', []]) ==> 11
38. min: 求取数组中非NaN数据中的最小值
function min(arr){
arr = arr.filter(item => !_isNaN(item))
return arr.length ? Math.min.apply(null, arr) : undefined
}
//min([1, 2, '11', null, 'fdf', []]) ==> 1
39. random: 返回一个lower - upper之间的随机数
lower、upper无论正负与大小,但必须是非NaN的数据
function random(lower, upper){
lower = +lower || 0 upper = +upper || 0
return Math.random() * (upper - lower) + lower;
}
//random(0, 0.5) ==> 0.3567039135734613//random(2, 1) ===> 1.6718418553475423//random(-2, -1) ==> -1.4474325452361945
40. Object.keys: 返回一个由一个给定对象的自身可枚举属性组成的数组
Object.keys = Object.keys || function keys(object) { if(object === null || object === undefined){ throw new TypeError('Cannot convert undefined or null to object'); } let result = [] if(isArrayLike(object) || isPlainObject(object)){ for (let key in object) { object.hasOwnProperty(key) && ( result.push(key) ) } } return result;
41. Object.values: 返回一个给定对象自身的所有可枚举属性值的数组
Object.values = Object.values || function values(object) {
if (object === null || object === undefined) {
throw new TypeError('Cannot convert undefined or null to object');
}
let result = []
if (isArrayLike(object) || isPlainObject(object)) {
for (let key in object) {
object.hasOwnProperty(key) && (result.push(object[key]))
}
}
return result
}
42. arr.fill: 使用 value 值来填充 array,从start位置开始, 到end位置结束(但不包含end位置),返回原数组
Array.prototype.fill = Array.prototype.fill || function fill(value, start, end) {
let ctx = this
let length = ctx.length;
start = parseInt(start) if (isNaN(start)) {
start = 0
} else if (start < 0) {
start = -start > length ? 0 : (length + start);
}
end = parseInt(end) if (isNaN(end) || end > length) {
end = length
} else if (end < 0) {
end += length;
}
while (start < end) {
ctx[start++] = value;
}
return ctx;
} //Array(3).fill(2) ===> [2, 2, 2]
43. arr.includes: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false,可指定开始查询的位置
Array.prototype.includes = Array.prototype.includes || function includes(value, start) {
let ctx = this
let length = ctx.length;
start = parseInt(start) if (isNaN(start)) {
start = 0
} else if (start < 0) {
start = -start > length ? 0 : (length + start);
}
let index = ctx.indexOf(value) return index >= start;
}
44. arr.find: 返回数组中通过测试(函数fn内判断)的第一个元素的值
Array.prototype.find = Array.prototype.find || function find(fn, ctx) {
ctx = ctx || this
let result;
ctx.some((value, index, arr), thisValue) => {
return fn(value, index, arr) ? (result = value, true) : false
}) return result
}
45. arr.findIndex : 返回数组中通过测试(函数fn内判断)的第一个元素的下标
Array.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx) {
ctx = ctx || this
let result;
ctx.some((value, index, arr), thisValue) => {
return fn(value, index, arr) ? (result = index, true) : false
}) return result
}
46. performance.timing: 利用performance.timing进行性能分析
window.onload = function () {
setTimeout(function () {
let t = performance.timing console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(
0)) console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0)) console.log(
'request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0)) console.log('解析dom树耗时 :' +
(t.domComplete - t.domInteractive).toFixed(0)) console.log('白屏时间 :' + (t.responseStart - t.navigationStart)
.toFixed(0)) console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(
0)) console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0)) if (t =
performance.memory) {
console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
}
})
}
47. 禁止某些键盘事件
document.addEventListener('keydown', function (event) {
return !(112 == event.keyCode || //F1
123 == event.keyCode || //F12
event.ctrlKey && 82 == event.keyCode || //ctrl + R
event.ctrlKey && 78 == event.keyCode || //ctrl + N
event.shiftKey && 121 == event.keyCode || //shift + F10
event.altKey && 115 == event.keyCode || //alt + F4
"A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签 )
||
(event.returnValue = false)
});
48. 禁止右键、选择、复制
['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
document.addEventListener(ev, function (event) {
return event.returnValue = false
})
});
49. 防抖节流函数
// TODO 防抖函数 export const debounce = (func, delay) => { let timer = null; return (...args) => { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); } }; // 节流函数 export const throttling = (fn, delay) => { let lastTime = 0; return function () { let nowTime = new Date().now(); if(nowTime - lastTime > delay) { fn.call(this); lastTime = nowTime; } } }
50。格式化时间
export const formatDate = (date, fmt) => { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; };
const padLeftZero = (str) => {
return ('00' + str).substr(str.length);
};
51. 文件提取
const bufferSplit = (buffer, delimiter) => {
let arr = {};
let n = 0;
while ((n = buffer.indexOf(delimtter) != -1)) {
arr.push(buffer.slice(0, n));
buffer = buffer.slice(n + delimiter.length);
}
arr.push(buffer);
return arr;
}
52.生成随机颜色
function getRandomColor () {
let rgb = [];
for (let i = 0; i < 3; i++) {
let color = Math.floor(Math.random() * 256).toString();
color = color.length === 1 ? '0' + color : color;
rgb.push(color);
}
return '#' + rgb.join('');
}
53.驼峰命名
//已知有字符串foo='get-element-by-id',写一个function将其转化成驼峰表示法”getElementById”
const toUpper = (str) => {
let arr = str.split('-'); // 字符串截取
for (let i = 1; i < arr.length; i++) {
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
}
return arr.join(''); // 字符串拼接
};
54.排序去重
// ES6 sort Set
var arr = [32,4,67,82,21,11,11,11,11];
arr = arr.sort((num1, num2) => {
return num1 - num2;
});
function unique(arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr));
55.冒泡排序
// 排序 let arr = [55, 11, 44, 66, 11, 2, 3, 4, 9]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j + 1]) { /** * arr[j] > arr[j + 1] 升序 * arr[j] < arr[j + 1] 降序 */ let temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr); // 去重 //原数组 var arr = [8, 11, 20, 5, 20, 8, 0, 2, 4, 0, 8]; // 新数组 var t = [];//var t = [8,11]; t[0] = arr[0]; //arr中的每个元素 for (var i = 0; i < arr.length; i++) { //t中的每个元素 for (var k = 0; k < t.length; k++) {
//当原数组中的值和新数组中的值相同的时候,就没有必要再继续比较了,跳出内循环 if (t[k] === arr[i]) { break; } //拿原数组中的某个元素比较到新数组中的最后一个元素还没有重复 if (k === t.length - 1) { //将数据插入新数组 t.push(arr[i]); } } }
56.数组反转
// ES6 reverse var arr = [1,2,3,4,5,6,7,8]; arr= arr.reverse(); console.log(...arr);
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; i < arr.length / 2; i++) {
//借助第三方变量交换两个变量的值
var temp = arr[i];
arr[i] = arr[arr.length - i];
arr[arr.length - i] = temp;
}
console.log(arr);
57.css实现小三角
#box {
0;
height: 0;
border: 10px solid transparent;
border-top-color: deeppink;
}
58.rem移动端适配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ 8rem; height: 8rem; background: deeppink; }
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//获取屏幕宽度
var width = document.documentElement.clientWidth;//获取html var htmlNode = document.querySelector('html'); //设置html字体大小 htmlNode.style.fontSize = width/16 + 'px';
</script>
</html>
59.函数柯里化
function ParamsCurry (fn) { let _arg = [].splice.call(arguments, 1); return function () { let newArg = _arg.concat([].splice.call(arguments, 0)); return fn.apply(this, newArg); } }
function Curry (fn) {
let length = length || fn.length;
return function () {
if(arguments.length < length) {
let combined = [fn].concat([].splice.call(arguments, 0));
return Curry(ParamsCurry.apply(this, combined), length - arguments.length);
} else {
return fn.apply(this, arguments);
}
}
}
function add(a, b, c, d) {
return a + b + c + d;
}
let demo = ParamsCurry(add);
demo(1, 2, 3, 4);
demo(1, 2, 3)(4);
demo(1, 2)(3, 4);
demo(1)(2)(3)(4);
60. 打印菱形
for (var i = 0; i < 6; i++) {
for (var k = 0; k < 6 - i - 1; k++) {
document.writeln(" ");
}
for (var j = 0; j <= (2 * i - 1) + 1; j++) {
document.writeln("*");
}
document.writeln("<br/>");
}
//打印菱形的下半部分
for (var i = 0; i < 5; i++) {
for (var k = 0; k < i + 1; k++) {
document.writeln(" ");
}
for (var m = 0; m < (9 - 3 * i) + i; m++) {
document.writeln("*");
}
document.writeln("<br/>");
}
61.冒泡排序
const sort = (arr) => {
let temp = 0;
for (lei i = 0; i <= arr.length; i++) {
for (let j = 0; j <= arr.length - 1 - i; j++) {
if (arr[j] > arr[j+1]) { // 升序 arr[j] < arr[j+1] 降序
temp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
}
return arr;
}
62. 随机取出字符
/**
* @param min
* @param max
* @return {number}
*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max + 1 - min) + min)
}
/**
*
- @param len
@return {string}
*/
function getRandomStr(len) {
let template = "",
index = "",
result = "";
for (let i = 65; i < 65 + 26; i++) {
template += String.fromCharCode(i);
}
for (let i = 97; i < 97 + 26; i++) {
template += String.fromCharCode(i);
}
for (let i = 48; i < 48 + 10; i++) {
template += String.fromCharCode(i);
}
for (let i = 0; i<len;i++) {
index = getRandom(0, template.length - 1);
result += template[index];
}
return result;
}
63. 判断身份证的信息
/**
* @method getInfoPid
* @param {string} pid
* @return {{出生月份: number, 出生年份: number, 天数: number, 性别: (string)}}
*/
function getInfoPid(pid) {
return {
"出生年份": +pid.substr(6, 4),
"出生月份": +pid.substr(10, 2),
"天数": +pid.substr(12, 2),
"性别": pid[pid.length - 2] % 2 === 0 ? "女" : "男"
}
}
64. 获取年龄
const isLeap = (year) => {
return year % 4 === 0 && year % 100 !== 0 || year %400 === 0
}
const getAge = (year, month, day) => {
let now = new Date();
let age = new,getFullYear() - year;
if (month === 2 && day === 29 && !isLeap(now.getFullYear())) {
day = 28;
}
let birthThisDay = new Date(now.getFullYear(), month - 1, day);
if (birthThisDay > now) {
age --;
}
return age;
}
65. 获取距离生日时间
const getBirth = (montn, day) => {
let now = new Date(),
year = now.getFullYear(),
// 今年的生日
birthday = new Date(year, month - 1, day),
dec = birthday - dec,
days = dec / (24 * 60 * 60 * 1000);
if (birthday < now) {
// 今年生日已过。计算激励明年生日的时间
birthday.setFullYear(now.getFullYear + 1)
}
return Math.ceil(days);
}
66. 获取当前月每一天的星期
const print = () => {
let now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1,
days = new Date(y, m, 0).getDate(),
result = "";
for(let i = 1;i < days; i++) {
result += `${y}年${m}月${i}日,星期${new Date(y, m-1, i).getDay()}`
}
return result;
}
67. 快速生成文字
ul>li*1>lorem*1
68. 拖拽
/**
* @method drop
* @param {HTMLElement} element
*/
const drop = (element) => {
// 不能用this,this指向window
// console.log(this);
let style = getComputedStyle(element),
elementLeft = parseFloat(style.left),
elementTop = parseFloat(style.top);
element.onmousedown = (e) => {
let pageX = e.pageX,
pageY = e.pageY;
if (e.button !== 0) return;
window.onmousemove = (e) => {
let disX = e.pageX - pageX,
disY = e.pageY - pageY,
newLeft = elementLeft + disX,
newTop = elementTop + disY;
if (newTop < 0) {
newTop = 0;
}
element.style.left = `${newLeft}px`;
element.style.top = `${newTop}px`;
};
window.onmouseup = window.onmouseleave = (e) => {
if (e.button === 0) window.onmousemove = null;
}
}
};
69. 评分
/** 评分
* @method Score
* @param {HTMLElement} element
* @param {string} initSrc 初始图片
* @param {string} changeSrc 变化的图片
* @param {HTMLElement} word 获取文字区域
*/
const Score = (element, initSrc, changeSrc, word) => {
let wrap = ['满意', '一般', '还不错', '很满意', '非常满意'];
let star = -1;
element.onclick = (e) => {
if (e.target.tagName === 'IMG') {
// 记录评分
let index = Array.from(element.children).indexOf(e.target);
}
};
element.onmouseover = (e) => {
if (e.target.tagName === 'IMG') {
e.target.src = changeSrc;
// 处理之前的
let prev = e.target.previousElementSibling;
while (prev) {
prev.src = changeSrc;
prev = prev.previousElementSibling;
}
// 处理之后
let next = e.target.nextElementSibling;
while (next) {
next.src = changeSrc;
next = next.nextElementSibling;
}
// 处理文字
// 得到父元素所有子元素
let index = Array.from(element.children).indexOf(e.target);
word.innerHTML = wrap[index];
}
};
element.onmouseleave = (e) => {
word.innerHTML = wrap[star] || "";
for (let i = 0; i < element.children.length; i++) {
if (i <= star) {
element.children[i].src = changeSrc;
} else {
element.children[i].src = initSrc;
}
}
}
};
70. 吸顶效果
const Ceiling = (element) => {
window.onscroll = (e) => {
let rect = element.getBoundingClientRect();
let scrollTop = 0;
if (rect.top < 0) {
element.style.position = 'fixed';
element.style.top = 0;
element.style.left = rect.left + 'px';
element.style.width = rect.width + 'px';
element.style.height = rect.height + 'px';
element.style.boxSizing = 'border-box';
// 记录滚动条的位置
scrollTop = window.scrollY + rect.top;
}
if (window.scrollY < scrollTop) {
element.setAttribute("style", "");
}
}
};
小程序格式化时间
var timeFormat = function(time){ var date = getDate(time); var date_seconds = date.getTime() / 1000; var now = getDate(); var now_seconds = now.getTime() / 1000; var timestamp = now_seconds - date_seconds; var timeStr = ""; if(timestamp < 60){ timeStr = "刚刚"; }else if(timestamp >= 60 && timestamp < 60*60){ var minutes = parseInt(timestamp / 60); timeStr = minutes + "分钟前"; }else if(timestamp >= 60*60 && timestamp < 60*60*24){ var hours = parseInt(timestamp / 60 / 60); timeStr = hours + "小时前"; }else if(timestamp >= 60*60*24 && timestamp < 60*60*24*30){ var days = parseInt(timestamp / 60 /60 /24); timeStr = days + "天前"; }else{ var year = date.getFullYear(); var month = date.getMonth(); var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); timeStr = year + "/" + month + "/" + day + " " + hour + ":" + minute; } return timeStr; }
生成随机验证码
let randomCode = _ => { const codeArea = 'zxcvbnmlkjhgfdsaqwertyuiop' + 'ZXCVBNMLKJHGFDSAQWERTYUIOP' + '0123456789'; let result = ''; while(result.length < 4) { let random = Math.round(Math.random() * 61), char = codeArea[random]; result.indexOf(char) === -1 ? result += char : null; } return result; }