203.原生js滑块验证
| |
| window.onload = function() { |
| |
| var box = document.querySelector(".box") |
| var btn = document.querySelector(".btn") |
| var bg = document.querySelector(".bg") |
| var text1 = document.querySelector(".text") |
| |
| |
| |
| |
| var flag = false; |
| btn.onmousedown = function(event) { |
| var downx = event.clientX; |
| btn.onmousemove = function(e) { |
| var movex = e.clientX - downx; |
| |
| if (movex > 0) { |
| this.style.left = movex + "px"; |
| bg.style.width = movex + "px"; |
| if (movex >= box.offsetWidth - 40) { |
| |
| flag = true |
| text1.innerHTML = "验证成功" |
| text1.style.color = "#fff" |
| |
| btn.onmousedown = null; |
| btn.onmousemove = null; |
| } |
| } |
| } |
| } |
| |
| btn.onmouseup = function() { |
| |
| btn.onmousemove = null; |
| if (flag) return; |
| this.style.left = 0; |
| bg.style.width = 0 + "px"; |
| } |
| } |
204.纯 js无限加载瀑布
| |
| function randomNumber(m, n) { |
| return Math.floor(Math.random() * (n - m + 1) + m); |
| } |
| |
| function randomColor() { |
| return "rgb(" + randomNumber(0, 255) + "," + randomNumber(0, 255) + "," + randomNumber(0, 255) + ")"; |
| } |
| |
| |
| var scrollTopDistance; |
| |
| var uls = document.querySelectorAll("ul"); |
| var i = 0; |
| var k = i; |
| |
| function waterFall() { |
| for (i = k; i < k + 4; i++) { |
| |
| var li = document.createElement("li"); |
| |
| li.style.backgroundColor = randomColor(); |
| |
| li.style.height = randomNumber(120, 400) + "px"; |
| |
| li.innerHTML = i + 1 + ""; |
| |
| |
| var index = 0; |
| for (var j = 0; j < uls.length; j++) { |
| if (uls[j].offsetHeight < uls[index].offsetHeight) { |
| index = j; |
| } |
| } |
| |
| uls[index].appendChild(li); |
| } |
| k = i; |
| return uls[index].offsetHeight; |
| } |
| waterFall(); |
| |
| window.onmousewheel = function() { |
| |
| var windowH = document.documentElement.clientHeight; |
| |
| var scrollH = document.documentElement.scrollTop || |
| document.body.scrollTop; |
| |
| var documentH = document.documentElement.scrollHeight || |
| document.body.scrollHeight; |
| |
| if (windowH + scrollH > documentH - 200) { |
| |
| waterFall() |
| } |
| } |
205.jQuery两个元素比较高度
| $(*function* () { |
| *var* w_max = 0; |
| * |
| $("#MenuNavigation li").each(*function* () { |
| *var* w = $(*this*).innerWidth(); |
| w_max = w > w_max ? w : w_max; |
| }) |
| $("#MenuNavigation li").width(w_max) |
| * |
| }) |
206.js定时清除缓存，存储缓存，获取缓存
| |
| export const storage = { |
| set: function(variable, value, ttl_ms) { |
| var data = { value: value, expires_at: new Date(ttl_ms).getTime() }; |
| localStorage.setItem(variable.toString(), JSON.stringify(data)); |
| }, |
| get: function(variable) { |
| var data = JSON.parse(localStorage.getItem(variable.toString())); |
| if (data !== null) { |
| debugger |
| if (data.expires_at !== null && data.expires_at < new Date().getTime()) { |
| localStorage.removeItem(variable.toString()); |
| } else { |
| return data.value; |
| } |
| } |
| return null; |
| }, |
| remove(key) { |
| localStorage.removeItem(key); |
| } |
| } |
207.数组降维
| |
| reduceDimension(arr) { |
| var reduced = []; |
| for (var i = 0; i < arr.length; i++) { |
| reduced = reduced.concat(arr[i]); |
| } |
| return reduced; |
| } |
208.设置cookie,获取cookie,删除cookie
| var cookieUtil = { |
| getCookie: function (name) { |
| var arrCookie = document.cookie.split("; "); |
| for (var i = 0; i < arrCookie.length; i++) { |
| var cookieItem = arrCookie[i].split('='); |
| if (cookieItem[0] == name) { |
| return cookieItem[1]; |
| } |
| } |
| return undefined; |
| }, |
| setCookie: function (name, value, expires, path, domain, secure) { |
| var cookieText = encodeURIComponent(name) + "=" + |
| encodeURIComponent(value); |
| if (expires instanceof Date) { |
| cookieText += "; expires=" + expires.toGMTString(); |
| } |
| if (path) { |
| cookieText += "; path=" + path; |
| } |
| if (domain) { |
| cookieText += "; domain=" + domain; |
| } |
| if (secure) { |
| cookieText += "; secure"; |
| } |
| document.cookie = cookieText; |
| }, |
| removeCookie: function (name, path, domain, secure) { |
| this.set(name, "", new Date(0), path, domain, secure); |
| } |
| } |
209.判读是否为外链
| |
| |
| |
| |
| |
| |
| export function isExternal(path) { |
| return /^(https?:|mailto:|tel:)/.test(path); |
| } |
| |
210.校验密码是否小于6位
| |
| |
| |
| |
| |
| export function isPassword(str) { |
| return str.length >= 6; |
| } |
| |
211.判断是否为数字
| |
| |
| |
| |
| |
| |
| export function isNumber(value) { |
| const reg = /^[0-9]*$/; |
| return reg.test(value); |
| } |
212.判断是否是名称
| |
| |
| |
| |
| |
| |
| export function isName(value) { |
| const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/; |
| return reg.test(value); |
| } |
213.判断是否为IP
| |
| |
| |
| |
| |
| |
| export function isIP(ip) { |
| const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; |
| return reg.test(ip); |
| } |
214.判断是否是传统网站
| |
| |
| |
| |
| |
| |
| export function isUrl(url) { |
| const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; |
| return reg.test(url); |
| } |
215.判断是否是小写字母
| |
| |
| |
| |
| |
| |
| export function isLowerCase(str) { |
| const reg = /^[a-z]+$/; |
| return reg.test(str); |
| } |
216.判断是否是大写字母
| |
| |
| |
| |
| |
| |
| export function isUpperCase(str) { |
| const reg = /^[A-Z]+$/; |
| return reg.test(str); |
| } |
217.判断是否是大写字母开头
| |
| |
| |
| |
| |
| |
| export function isAlphabets(str) { |
| const reg = /^[A-Za-z]+$/; |
| return reg.test(str); |
| } |
218.判断是否是字符串
| |
| |
| |
| |
| |
| |
| export function isString(str) { |
| return typeof str === "string" || str instanceof String; |
| } |
219.判断是否是数组
| |
| |
| |
| |
| |
| |
| export function isArray(arg) { |
| if (typeof Array.isArray === "undefined") { |
| return Object.prototype.toString.call(arg) === "[object Array]"; |
| } |
| return Array.isArray(arg); |
| } |
220.判断是否是端口号
| |
| |
| |
| |
| |
| |
| export function isPort(str) { |
| const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; |
| return reg.test(str); |
| } |
221.判断是否是手机号
| |
| |
| |
| |
| |
| |
| export function isPhone(str) { |
| const reg = /^1\d{10}$/; |
| return reg.test(str); |
| } |
222.判断是否是身份证号(第二代)
| |
| |
| |
| |
| |
| |
| export function isIdCard(str) { |
| const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; |
| return reg.test(str); |
| } |
223.判断是否是邮箱
| |
| |
| |
| |
| |
| |
| export function isEmail(str) { |
| const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; |
| return reg.test(str); |
| } |
224.判断是否中文
| |
| |
| |
| |
| |
| |
| export function isChina(str) { |
| const reg = /^[\u4E00-\u9FA5]{2,4}$/; |
| return reg.test(str); |
| } |
225.判断是否为空
| |
| |
| |
| |
| |
| |
| export function isBlank(str) { |
| return ( |
| str == null || |
| false || |
| str === "" || |
| str.trim() === "" || |
| str.toLocaleLowerCase().trim() === "null" |
| ); |
| } |
226.判断是否为固话
| |
| |
| |
| |
| |
| |
| export function isTel(str) { |
| const reg = /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})(-| )?)?([0-9]{7,8})((-| |转)*([0-9]{1,4}))?$/; |
| return reg.test(str); |
| } |
227.判断是否为数字且最多两位小数
| |
| |
| |
| |
| |
| |
| export function isNum(str) { |
| const reg = /^\d+(\.\d{1,2})?$/; |
| return reg.test(str); |
| } |
228.判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
| |
| |
| |
| |
| |
| |
| export function isLongitude(str) { |
| const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/; |
| return reg.test(str); |
| } |
229.判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
| |
| |
| |
| |
| |
| |
| export function isLatitude(str) { |
| const reg = /^[-|+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/; |
| return reg.test(str); |
| } |
230.rtsp校验只要有rtsp://
| |
| |
| |
| |
| |
| |
| export function isRTSP(str) { |
| const reg = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; |
| const reg1 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):[0-9]{1,5}/; |
| const reg2 = /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\//; |
| return reg.test(str) || reg1.test(str) || reg2.test(str); |
| } |
231.判断IE浏览器版本和检测是否为非IE浏览器
| function IEVersion() { |
| var userAgent = navigator.userAgent; |
| var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; |
| var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; |
| var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; |
| if (isIE) { |
| var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); |
| reIE.test(userAgent); |
| var fIEVersion = parseFloat(RegExp["$1"]); |
| if (fIEVersion == 7) { |
| return 7; |
| } else if (fIEVersion == 8) { |
| return 8; |
| } else if (fIEVersion == 9) { |
| return 9; |
| } else if (fIEVersion == 10) { |
| return 10; |
| } else { |
| return 6; |
| } |
| } else if (isEdge) { |
| return 'edge'; |
| } else if (isIE11) { |
| return 11; |
| } else { |
| return -1; |
| } |
| } |
232.数组去重
方案一：Set + ...
| function noRepeat(arr) { |
| return [...new Set(arr)]; |
| } |
| noRepeat([1,2,3,1,2,3]) |
方案二：Set + Array.from
| function noRepeat(arr) { |
| return Array.from(new Set(arr)); |
| } |
| noRepeat([1,2,3,1,2,3]) |
方案三：双重遍历比对下标
| function noRepeat(arr) { |
| return arr.filter((v, idx)=>idx == arr.lastIndexOf(v)) |
| } |
| noRepeat([1,2,3,1,2,3]) |
方案四：单遍历 + Object 特性
Object 的特性是 Key 不会重复。 这里使用 values 是因为可以保留类型，keys 会变成字符串。
| function noRepeat(arr) { |
| return Object.values(arr.reduce((s,n)=>{ |
| s[n] = n; |
| return s |
| },{})) |
| } |
| noRepeat([1,2,3,1,2,3]) |
后记
针对于上述的方案，还有其他变种实现。
233.查找数组最大
方案一：Math.max + ...
| function arrayMax(arr) { |
| return Math.max(...arr); |
| } |
| arrayMax([-1,-4,5,2,0]) |
方案二：Math.max + apply
| function arrayMax(arr) { |
| return Math.max.apply(Math, arr) |
| } |
| arrayMax([-1,-4,5,2,0]) |
方案三：Math.max + 遍历
| function arrayMax(arr) { |
| return arr.reduce((s,n)=>Math.max(s, n)) |
| } |
| arrayMax([-1,-4,5,2,0]) |
方案四：比较、条件运算法 + 遍历
| function arrayMax(arr) { |
| return arr.reduce((s,n)=>s>n?s:n) |
| } |
| arrayMax([-1,-4,5,2,0]) |
方案五：排序
| function arrayMax(arr) { |
| return arr.sort((n,m)=>m-n)[0] |
| } |
| arrayMax([-1,-4,5,2,0]) |
234.查找数组最小
同上，不明白为什么要分成两个题目。
- Math.max 换成 Math.min
- s>n?s:n 换成 `s
- (n,m)=>m-n 换成 (n,m)=>n-m，或者直接取最后一个元素
235.返回已 size 为长度的数组分割的原数组
方案一：Array.from + slice
| function chunk(arr, size = 1) { |
| return Array.from( |
| { |
| length: Math.ceil(arr.length / size), |
| }, |
| (v, i) => arr.slice(i * size, i * size + size) |
| ); |
| } |
| chunk([1,2,3,4,5,6,7,8],3) |
方案二：Array.from + splice
| function chunk(arr, size = 1) { |
| return Array.from( |
| { |
| length: Math.ceil(arr.length / size), |
| }, |
| (v, i) => arr.splice(0, size) |
| ); |
| } |
| chunk([1,2,3,4,5,6,7,8],3) |
方案三：遍历 + splice
| function chunk(arr, size = 1) { |
| var _returnArr = []; |
| while(arr.length){ |
| _returnArr.push(arr.splice(0, size)) |
| } |
| return _returnArr |
| } |
| chunk([1,2,3,4,5,6,7,8],3) |
检查数组中某元素出现的次数
方案一：reduce
| function countOccurrences(arr, value) { |
| return arr.reduce((a, v) => (v === value ? a + 1 : a + 0), 0); |
| } |
| countOccurrences([1,2,3,4,5,1,2,1,2,3], 1) |
方案二：filter
| function countOccurrences(arr, value) { |
| return arr.filter(v=>v===value).length |
| } |
| countOccurrences([1,2,3,4,5,1,2,1,2,3], 1) |
细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」
细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」
细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」
细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」
细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」
细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」