js
关注
分享
扫一扫
吃葡萄不吐葡萄皮嘻嘻
。
展开
-
你可能不知道的几个冷知识！
inset 是一个复合属性，可一次性设置元素的 top、right、bottom 和 left 值。即便禁用了F12快捷键和右键菜单，用户仍可通过其他方式访问控制台。只需在浏览器控制台中输入这行代码，即可让整个页面变为可编辑状态。可以通过text-shadow属性来实现前端文本的马赛克效果。效果类似于CSS的user-select: none属性。直接使用DOM原生的hidden属性即可实现。原创 2025-05-26 11:08:31 · 187 阅读 · 0 评论 -
获取日期区间的所有日期
【代码】获取日期区间的所有日期。原创 2024-05-24 15:25:41 · 384 阅读 · 0 评论 -
获取地址栏?后的参数并把其转行成对象格式
/?原创 2024-05-10 10:26:14 · 233 阅读 · 0 评论 -
js实现上下无缝滚动（不卡顿）
效果图如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2023-07-25 17:05:03 · 2439 阅读 · 7 评论 -
js计算数组中每个元素出现的次数
in。原创 2023-07-18 10:55:33 · 792 阅读 · 0 评论 -
Object.fromEntries()将键值对列表转换为一个对象
需求：计算出键名对应的键值的长度，并返回一个新的对象。原创 2023-07-14 10:11:52 · 410 阅读 · 0 评论 -
window.open()实现PDF预览
【代码】window.open()实现PDF预览。原创 2023-07-04 11:13:04 · 2347 阅读 · 1 评论 -
js实现千分位分割
【代码】js实现千分位分割。原创 2023-06-28 11:03:31 · 154 阅读 · 0 评论 -
查找数组中首个质数元素的索引
查找数组中素数的元素的索引（如果不存在素数，则返回 -1）原创 2023-03-14 16:52:34 · 100 阅读 · 0 评论 -
loop为true, slidesPerView为多个的时候，swiper精准获取激活的索引
loop为true, slidesPerView为多个的时候，swiper精准获取激活的索引原创 2022-12-28 16:25:23 · 1707 阅读 · 0 评论 -
字符串转换为驼峰格式
slice(a,b) 方法截取字符串，从下标a截取到下标b（包括下标为a的元素不包括下标b的元素），如果不指定a代表从索引 0开始，不指定b则代表截取到最后（包含最后一个元素）。a为负值时则表示从原数组中的倒数第几个元素开始提取。这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成。shift() 方法会删除数组的第一个元素并返回删除的这个元素，该方法会改变原数组。toUpperCase() 方法将字符串转换成大写形式并返回。原创 2022-11-08 10:27:43 · 643 阅读 · 0 评论 -
递归实现处理无限极子数据
需求说明：一个扁平数据列表，描述树形结构的字段pid,树形数据列表父级的id和子集的pid相等，则构成父子关系，我这里以pid==0作为顶级（parent），其他为children；原创 2022-08-29 10:41:58 · 393 阅读 · 0 评论 -
js数组对象取出相同项和不同项
js数组对象取出相同项和不同项。原创 2022-07-29 11:32:35 · 1062 阅读 · 0 评论 -
将伪数组变成真数组
伪数组，当一个对象具有以下特点：1、可以使用索引对数据进行操作；2、具有length（长度）属性；3、但是不能使用数组的方法，如push，pop等。如何将伪数组转成真正的数组？？1、🧡利用ES6提供的Array的from方法🧡var handleArrows2 = function(){ console.log("arguments",arguments) console.log(Array.from(arguments)) }handleArrows2(原创 2022-04-24 10:47:40 · 269 阅读 · 0 评论 -
判断一个变量是否为数组
判断一个变量是否为数组1、 Array.isArrayinstanceof 运算符用来判断对象类型。用法: 左边的运算数是一个object，右边运算数是对象类的名字或者构造函数; 返回true或false。[] instanceof Array; // true[] instanceof Object; // true2、 Object.prototype.toString.call()补充说明Object.prototype.toString.call()方法可以判断任意应用类型co原创 2022-04-24 09:51:00 · 596 阅读 · 0 评论 -
数组的fill()和flat()方法
fill()功能：用给定值填充一个数组参数第一个参数：value 必需。填充的值。第二个参数：start可选。开始填充位置。第三个参数：end 可选。停止填充位置 (默认为 array.length)传递一个参数：['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]传递了第二，第三个参数 var result = ["a", "b", "c"].fill(3, 1, 2);上面代码表示，fill原创 2022-04-20 14:44:35 · 523 阅读 · 0 评论 -
用正则表达式提取url和文本
方法一（不推荐）： <script> let str = '<a href="http://wwww.baidu.com">百度</a>' let reg = /<a href="(.*)">(.*)<\/a>/ let result = reg.exec(str) console.log(result) console.log(result原创 2022-03-31 11:47:21 · 548 阅读 · 1 评论 -
在浏览器地址栏输入URL，按下回车后究竟发生了什么？
面试题必问的题之一（重视！重视！重视）。在浏览器地址栏输入URL，按下回车后主要发生了以下六大步（以下图片来源-百度）详细讲解如下：第一步：用户输入网址第二步：进行DNS域名解析，将地址解析成ip地址浏览器DNS域名解析；系统（本地）NDS域名解析；路由器DNS域名解析；网络运行商DNS域名解析；递归DNS域名解析；[外链图片转存失败,源站可能有防盗图片保存下来直接来源-Z5SV6whttps://k-16blog.csdnimg.cn/60c2703f089560)(图片来源-百度)原创 2022-03-30 10:58:23 · 4308 阅读 · 2 评论 -
new Date(time).getTime()转换为时间戳苹果手机上结果为NaN
真无语呢，写的倒计时在pc,h5,安卓机上面都能正常显示，在IOS就出现NAN,一整个大无语事件。在网上搜了相关问题的解决方案，然鹅并没有任何作用，网上说的最多的就是ios不能识别用-来连接年月日（如：2022-03-12）需要换成/来连接（如：2022/03/12）,这种方法没有任何用！！！没有任何用！！！没有任何用！！！全网都用找个方法解决了就我解决不了。最后的解决方案就是直接写成了时间戳这样就成功了，小伙伴们有更好的方法欢迎在评论区留言艾特我~~...原创 2022-03-29 17:07:59 · 608 阅读 · 0 评论 -
生成器函数的简单使用
需求：实现1s后控制台输出1,2s后输出2,3s后输出3实现一：通常我们大多数情况下会使用setTimeout来进行嵌套实现 setTimeout(function () { console.log(1) setTimeout(function () { console.log(2) setTimeout(function () { console.log(3) }, 3000原创 2022-03-28 16:08:42 · 465 阅读 · 0 评论 -
简单实现js的继承
<script> // 创建一个父类 function Person(name,age){ this.name = name || 'rose'; this.age = age || 18; this.say = function(){ return `${this.name}今年${this.age}岁` } }原创 2022-03-21 16:38:02 · 342 阅读 · 0 评论 -
简单认识闭包
1 闭包的概念函数跨作用域访问变量,形成闭包. 闭包是一种作用域的体现. 一般把: 函数 和 变量 的总和,称为闭包。2 闭包的标准写法闭包的写法是: 父函数嵌套子函数, 子函数访问父函数的变量,把子函数返回或挂在全局。写法一:const 变量 = (function 父函数() { var 变量 function 子函数() { console.log(变量) } return 子函数})()写法二:;(function原创 2022-03-21 14:40:33 · 183 阅读 · 0 评论 -
防抖和节流的简单理解
一、防抖：在规定的时间第n秒后才会执行回调，如果在n秒内又被触发，则会进行重置（重新计时）；应用场景：登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存//封装防抖函数 function debounce(fn, delay = 1000) { // 定义一个变量 let timer原创 2022-03-21 13:51:48 · 818 阅读 · 0 评论 -
检测元素外部(或内部)的单击
demo如下：页面结构：当我们需要检测一个点击是发生在一个特定元素 el 的内部还是外部，通常使用的方法 let pEl = document.querySelector('.p') window.addEventListener('click', e => { // 获取被点击的元素 const currtentEl = e.target; console.log(currtentEl) // 检测在原创 2022-03-08 11:59:06 · 510 阅读 · 0 评论 -
一句话实现字符串去重
一句话实现字符串去重。原创 2022-02-09 15:26:47 · 308 阅读 · 0 评论 -
完成一个 getTags 函数，可以检测当前页面用到了哪些标签
函数返回包含标签的字符串的数组 function getTags() { var list1 = document.getElementsByTagName("*"); //ES5语法，返回HTMLCollection var list2 = document.querySelectorAll("*"); //ES6语法，返回nodeList var tags = Array.prototype.slice.ca原创 2022-02-09 15:23:01 · 452 阅读 · 0 评论 -
去除arr中的空数组项
let arr = [1,2,,3];过滤空数组项，不包括null, undefined这类，数组中的 empty 元素不会参与数组项遍历，故只需返回 true 即可过滤掉 empty 元素（而不会牵连 0、NaN、null、undefined、’’ 这些）arr.filter(i => true) //方法一arr.filter(Number) //方法二arr.filter(String) //方法三上面并不会最好的方法。数组有个API，天然去除空数组项，arr.f原创 2022-02-09 14:13:08 · 1288 阅读 · 1 评论 -
js简写小技巧
????1.当同时声明多个变量时，可简写成一行//普通写法let x;let y = 10; // 简写let x, y = 10;//利用解构，可为多个变量同时赋值//普通写法let a, b, c; a = 3;b = 5;c = 2; // 简写let [a, b, c] = [5, 8, 12];????2.使用三元运算符简化if else//普通写法let marks = 20; let result; if (marks >= 20) {原创 2022-01-11 14:27:17 · 578 阅读 · 0 评论 -
正则实现千分位分割
function thousand(num) { return (num+"").replace(/\d(?=(\d{3})+$)/g, "$&,") } console.log(thousand(1234567890000));原创 2022-01-06 17:16:42 · 478 阅读 · 0 评论 -
简洁高效的rem适配方案flexible.js
flexible.js的原理是把当前设备划分为10等份，在不同设备下，比例还是一致的，我们要做的是确定好我们当前设备的html文字大小就行了比如：当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/10)就可以页面元素的rem值：当前元素的px/75✨✨✨使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题✨✨✨1.先在gitHub上面下载并在页面中引入flexible.js2.写less样式dem如下图：...原创 2021-12-28 17:03:11 · 411 阅读 · 2 评论 -
移动端实现可拖动的悬浮球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可拖动的悬浮球</title> <style> *{ mar.转载 2021-12-20 16:05:07 · 492 阅读 · 0 评论 -
在html中Input 标签内可以通过oninput事件进行校验
输入纯数字 oninput="value=value.replace(/[^\d]/g,'')"第一位大于0的纯数字 oninput="value=value.replace(/\D|^0/g,'')"<input type="text" name="联系电话：" placeholder="联系电话" id="mark_search" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11">...原创 2021-12-07 15:57:00 · 779 阅读 · 0 评论 -
获取指定字符所在的位置
逐步增大开始搜索的位置，通过 indexOf()遍历了整个字符串。首先取得第一个"e"的位置，然后进入循环，将上一次的位置加 1 再传给 indexOf()，确保搜索到最后一个子字符串实例之后。每个位置都保存在 positions 数组中。let stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";let positions = []; let pos = stringValue.indexOf("e");原创 2021-12-07 11:42:04 · 1399 阅读 · 0 评论 -
Javascript错误提示--SyntaxError: Illegal return statement
执行如下代码报错： let flag = true; if(!flag) return; else console.log(1111)意思：非法的返回语句；原因是在js中return 语句只能放在function中，如果不是在一个function中弹出如上错误,解决方法只要把这个if语句放到一个函数中即可。window.onload = function () { let flag = true; if(!flag) return; else cons原创 2021-12-06 14:49:25 · 2780 阅读 · 0 评论 -
生成随机十六进制代码之生成随机颜色
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');效果图如下：原创 2021-12-03 16:14:50 · 432 阅读 · 0 评论 -
判断true的正确做法
!!可将其他类型的值转换为boolean类型 var foo = null, foo2 = NaN, foo3 = undefined, foo4 = null; console.log(!!foo) //false console.log(!!foo2) //false console.log(!!foo3) //false console.log(!!foo4原创 2021-12-03 15:12:25 · 306 阅读 · 0 评论 -
实现数字千位分割的方法
toLocaleString()let num=12345678;console.log(num.toLocaleString()); // 12,345,678函数处理 ：实现思路是将数字转换为字符数组，再循环整个数组， 每三位添加一个分隔逗号，最后再合并成字符串。因为分隔符在顺序上是从后往前添加的：如 1234567添加后是1,234,567 而不是 123,456,7 ，所以方便起见可以先把数组倒序，添加完之后再倒序回来，就是正常的顺序了。要注意的是如果数字带小数的话，要把小数部分分开处理。转载 2021-12-03 14:48:57 · 537 阅读 · 0 评论 -
前端设置使用rem
<script> (function (doc, win) { var docEl = doc.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = function () { var clientWidt原创 2021-12-03 09:50:29 · 462 阅读 · 0 评论 -
在JS中克隆对象的3种方法
const food = { beef: '牛肉', bacon: '腊肉' } // "Spread" { ...food } // "Object.assign" Object.assign({}, food) // "JSON" JSON.parse(JSON.stringify(food)) // { beef: '牛肉', bacon: '腊肉' }原创 2021-11-24 10:20:59 · 706 阅读 · 0 评论 -
将对象转换为数组
Object.keys()Object.values()Object.entries()???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? const zoo = { dog: '狗', panda: '熊猫',原创 2021-11-24 10:08:31 · 377 阅读 · 0 评论