203.原生js滑块验证
//event.clientX:鼠标点下的点到左侧x轴的距离
window.onload = function() {
//事件处理 onmousedown onmousemove onmouseup
var box = document.querySelector(".box")
var btn = document.querySelector(".btn")
var bg = document.querySelector(".bg")
var text1 = document.querySelector(".text")
//封装的选择器 声明式函数可以提升
// function fun(){
//
// }
var flag = false; //标记
btn.onmousedown = function(event) {
var downx = event.clientX; //按下后获取的与x轴的距离
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无限加载瀑布
//随机[m,n]之间的整数 封装
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) + ")";
}
//获取当前的scrollTop
var scrollTopDistance;
//获取所有的ul
var uls = document.querySelectorAll("ul");
var i = 0;
var k = i;
function waterFall() {
for (i = k; i < k + 4; i++) {
//创建li
var li = document.createElement("li");
//随机颜色
li.style.backgroundColor = randomColor();
//随机高度
li.style.height = randomNumber(120, 400) + "px";
//手动转换为字符串
li.innerHTML = i + 1 + "";
//插入到对应的ul中
//判断哪个ul的高度低，该次创建的li就插入到此ul中
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();
//鼠标滚轮事件,由于右侧没有滚轮，所以使用onmousewheel事件
window.onmousewheel = function() {
//获取窗口的高度，要兼容浏览器
var windowH = document.documentElement.clientHeight;
//滚轮于top的距离，要兼容浏览器
var scrollH = document.documentElement.scrollTop ||
document.body.scrollTop;
//获取窗口的可见高度
var documentH = document.documentElement.scrollHeight ||
document.body.scrollHeight;
//窗口的高度 + 滚轮与顶部的距离 > 窗口的可见高度-200
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.判读是否为外链
/**
* @description 判读是否为外链
* @param path
* @returns {boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path);
}
复制代码210.校验密码是否小于6位
/**
* @description 校验密码是否小于6位
* @param str
* @returns {boolean}
*/
export function isPassword(str) {
return str.length >= 6;
}
复制代码211.判断是否为数字
/**
* @description 判断是否为数字
* @param value
* @returns {boolean}
*/
export function isNumber(value) {
const reg = /^[0-9]*$/;
return reg.test(value);
}
复制代码212.判断是否是名称
/**
* @description 判断是否是名称
* @param value
* @returns {boolean}
*/
export function isName(value) {
const reg = /^[一-龥a-zA-Z0-9]+$/;
return reg.test(value);
}
复制代码213.判断是否为IP
/**
* @description 判断是否为IP
* @param ip
* @returns {boolean}
*/
export function isIP(ip) {
const reg = /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/;
return reg.test(ip);
}
复制代码214.判断是否是传统网站
/**
* @description 判断是否是传统网站
* @param url
* @returns {boolean}
*/
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.判断是否是小写字母
/**
* @description 判断是否是小写字母
* @param str
* @returns {boolean}
*/
export function isLowerCase(str) {
const reg = /^[a-z]+$/;
return reg.test(str);
}
复制代码216.判断是否是大写字母
/**
* @description 判断是否是大写字母
* @param str
* @returns {boolean}
*/
export function isUpperCase(str) {
const reg = /^[A-Z]+$/;
return reg.test(str);
}
复制代码217.判断是否是大写字母开头
/**
* @description 判断是否是大写字母开头
* @param str
* @returns {boolean}
*/
export function isAlphabets(str) {
const reg = /^[A-Za-z]+$/;
return reg.test(str);
}
复制代码218.判断是否是字符串
/**
* @description 判断是否是字符串
* @param str
* @returns {boolean}
*/
export function isString(str) {
return typeof str === "string" || str instanceof String;
}
复制代码219.判断是否是数组
/**
* @description 判断是否是数组
* @param arg
* @returns {arg is any[]|boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray === "undefined") {
return Object.prototype.toString.call(arg) === "[object Array]";
}
return Array.isArray(arg);
}
复制代码220.判断是否是端口号
/**
* @description 判断是否是端口号
* @param str
* @returns {boolean}
*/
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.判断是否是手机号
/**
* @description 判断是否是手机号
* @param str
* @returns {boolean}
*/
export function isPhone(str) {
const reg = /^1d{10}$/;
return reg.test(str);
}
复制代码222.判断是否是身份证号(第二代)
/**
* @description 判断是否是身份证号(第二代)
* @param str
* @returns {boolean}
*/
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.判断是否是邮箱
/**
* @description 判断是否是邮箱
* @param str
* @returns {boolean}
*/
export function isEmail(str) {
const reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
return reg.test(str);
}
复制代码224.判断是否中文
/**
* @description 判断是否中文
* @param str
* @returns {boolean}
*/
export function isChina(str) {
const reg = /^[一-龥]{2,4}$/;
return reg.test(str);
}
复制代码225.判断是否为空
/**
* @description 判断是否为空
* @param str
* @returns {boolean}
*/
export function isBlank(str) {
return (
str == null ||
false ||
str === "" ||
str.trim() === "" ||
str.toLocaleLowerCase().trim() === "null"
);
}
复制代码226.判断是否为固话
/**
* @description 判断是否为固话
* @param str
* @returns {boolean}
*/
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.判断是否为数字且最多两位小数
/**
* @description 判断是否为数字且最多两位小数
* @param str
* @returns {boolean}
*/
export function isNum(str) {
const reg = /^d+(.d{1,2})?$/;
return reg.test(str);
}
复制代码228.判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
/**
* @description 判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
* @param str
* @returns {boolean}
*/
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位小数）
/**
* @description 判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
* @param str
* @returns {boolean}
*/
export function isLatitude(str) {
const reg = /^[-|+]?([0-8]?d{1}.d{1,5}|90.0{1,5})$/;
return reg.test(str);
}
复制代码230.rtsp校验只要有rtsp://
/**
* @description rtsp校验，只要有rtsp://
* @param str
* @returns {boolean}
*/
export function isRTSP(str) {
const reg = /^rtsp://([a-z]{0,10}:.{0,10}@)?(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/;
const reg1 = /^rtsp://([a-z]{0,10}:.{0,10}@)?(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]):[0-9]{1,5}/;
const reg2 = /^rtsp://([a-z]{0,10}:.{0,10}@)?(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|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; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
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; //IE版本<=7
}
} else if (isEdge) {
return 'edge'; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
}
复制代码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)
复制代码 赞 (0)
相关推荐
-
javascript中的消息对话框分为（js 消息框）
消息对话框：是内置函数。将结果直接以对话框的形式直观地显示结果。常用的消息对话框有3种。警示对话框（alert）、确认对话框（confirm）和提示对话框（prompt）3种。1. 警示对话框警示对话框的关键字是alert，因为...
-
html5特效效果（做了个html5特效）
html5/3D旋转特效 html5/3D旋转特效，毫无javascript痕迹！ 做这个html5特效，其实对于新手来说还是有一定的难度的，虽然没有javascript，但是用到了许多html5的新特性，包括构建3d场景，对于旋转的一些计算，对于3d...
-
Java入门所有基础知识点（java入门基础知识教程）
今日分享开始啦，请大家多多指教~ 一、 前言、入门程序、常量 1.1 Java 语言概述。 Java 是一种高级编程语言，而且是面向对象的编程语言。Java 语言是美国 Sun 公司(Stanford University Network)，在 1995 年推出的...
-
字节截取字符串（JavaScript截取字符串）
字符串的截取在不同的编程语言中有着不同的方式和表现形式，本文我们就一起来学习在JavaScript截取字符串。 在JavaScript中常用的字符截取函数有slice()、substring()、substr()3个，我们将从这三个函数出发，看看在...
-
javascript是干什么的（javascript主要用来干嘛）
我们的网页又很多的动态交互效果，比如鼠标滑过，点击，键盘点击触发效果等，这些靠我们的CSS样式是不能完全完成的，需要靠我们的JavaScript（以下称JS）代码才能完成。 JS的引用非常简单，他和CSS的引用非常相似，...
-
javascript是干什么的（JavaScript基础知识必知）
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。 JS作用：表单验证，减轻服务端的压力；添加页面动画效果；动态更改页面内容；Ajax网络请求。 下面简单介绍JS的基础知识： J...
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。