Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

  每天 30 秒系列之前端资讯

整理前端界的最新资讯,邀您一同探索新世界 TypeScriptTypeScript3.7RC 发布,支持可选链等功能特性 VueVue3 中让人激动的新特性返回总目录每天 30 秒系列

  每天 30 秒系列之 JavaScript 代码

精选常见代码集,帮助您提高打码效率 🔌适配器 arycallcollectInfoflipoveroverArgspipeAsyncFunctionspipeFunctionspromisifyreargspreadOverunary📚数组 allallEqualanyarrayToCSVbifurcatebifurcateBychunkcompactcountBycountOccurrencesdeep

浏览器 - 类值切换

2019-12-13 描述为元素切换类值。提示使用 element.classList.toggle()为指定元素切换类值 toggle 方法中如果类值存在,则删除他并返回 false。如果类值不存在,则添加他并返回 truetoggle 方法中当第二个参数存在时,需要根据执行结果来判断类值的添加或删除:若执行结果为 true,则添加指定的类值;若执行结果为 false,则删除指定的类值代码 consttoggleCl

浏览器 - 平滑的滚动到可见区域

2019-12-12 描述将元素平滑的滚动到浏览器窗口的可见区域中。提示使用 scrollIntoView 方法来滚动元素把参数{behavior:'smooth'}传递给 scrollIntoView 方法中,以便可以进行平滑的滚动代码 constsmoothScroll=element=>document.querySelector(element).scrollIntoView({behavior:'sm

浏览器 - 显示元素

2019-12-11 描述展现所有指定的元素。提示使用扩展运算符...和 Array.prototype.forEach()为指定的每一个元素清除 display 属性注意:以上方法太暴力,可能会破坏了页面中原有的布局。我们应先使用 getComputedStyle 来判断元素本身最终的 display、visibility、opacity 属性值,然后对在界面中无法显示的元素进行相应的修改代码 constshow=

浏览器 - 设置样式

2019-12-10 描述为指定的元素设置 CSS 样式。提示使用 element.style 为指定的元素设置 CSS 值注意:不能通过直接给 style 属性设置字符串(如:elt.style="color:blue;")来进行 CSS 的设置。因为通过 style 属性返回的 CSSStyleDeclaration 对象是只读的,但 style 属性中具体的样式却可以用来设置样式。此外,由于 style 属性的设置不会影响到通过其

浏览器 - 序列化表单

2019-12-09 描述将表单中的所有元素编码为一个查询字符串。提示使用 FormData 构造器将 HTMLform 转换为 FormData 使用 Array.from()将 FormData 转换为数组,传递一个 map 函数做为第二个参数使用 Array.prototype.map()和 window.encodeURIComponent()将每一个字段中的值进行编码使用带有适当参数的 Array.prototype.

浏览器 - 平滑的滚动到顶部

2019-12-06 描述平滑的滚动到页面顶部。提示使用 document.documentElement.scrollTopordocument.body.scrollTop 获取到顶部的距离每次往上滚动一点使用 window.requestAnimationFrame()让滚动呈现动画效果代码 constscrollToTop=()=>{constc=document.documentElement.sc

浏览器 - 异步运行一个不阻塞 UI 的函数 (advanced)

2019-12-05 描述使用 WebWorker 在单独的线程中运行一个函数,在不阻塞 UI 的情况在允许长时间运行该函数。提示使用 Blob 对象 URL 创建一个 Worker,内容应为所提供函数的字符串版本在回调函数执行完毕后,需马上将其返回值进行传递返回一个 Promise,用来监听 worker 的 onmessage 和 onerror 事件。将 worker 中返回的数据做为 Promise 成功的参数,将错误信息做为 Pro

浏览器 - 重定向

2019-12-04 描述重定向到一个指定的 URL。提示使用 window.location.href 或者 window.location.replace()来重定向到指定的 url 传入的第二个参数用来模拟一个链接的点击(true-默认)或者一个 HTTP 的重定向(false)相关文章:浏览器-https 重定向代码 constredirect=(url,asLink=true)=>asLink?(window.

浏览器 - 页面重绘前进行回调

2019-12-03 描述在每一帧动画前调用提供的回调函数。提示需使用递归变量 running 为 true 时,将持续调用已提供回调函数的 window.requestAnimationFrame()对象中应包含 start 和 stop 两个方法,以便手工对记录状态进行控制第二个参数 autoStart 默认值为 true。当运行该函数时,默认调用 start 方法代码 constrecordAnimationFrames=(

浏览器 - 返回浏览器支持的 CSS 前缀属性

2019-12-02 描述如果浏览器中的 CSS 属性需要前缀支持的话请返回包含其前缀的完整属性。提示将各浏览器的前缀放入 prefixes 数组中使用 String.prototype.charAt()和 String.prototype.toUpperCase()将属性的第一个字母转换为大写,然后在前面添加上前缀使用 Array.prototype.findIndex()对 prefixes 数组进行检测,如果 do

浏览器 - 监听用户输入方式的改变 (advanced)

2019-11-29 描述当用户输入方式发生变化(mouseortouch)时运行回调。根据输入设备启用/禁用代码很有用。这个过程时动态的,并且适用于混合设备(例如:触摸屏笔记本电脑)。提示使用两个事件监听器假设一开始的输入为 mouse,然后在文档上绑定一个 touchstart 事件监听在 touchstart 中添加一个 mousemove 事件监听器来监听两次连续的 mousemove 事件触发是否在 20ms 内

浏览器 - 添加监听事件

2019-11-28 描述使用事件代理为支持该事件的元素添加一个监听事件。提示使用 EventTarget.addEventListener()为元素添加一个监听事件如果可选对象中存在 target 属性,且当事件对象和指定的选择器相匹配时,我们才可以调用提供了正确的 this 上下文的回调如果可选对象中存在 target 属性,返回自定义代理函数的引用,以便在移除监听事件的时候可以进行使用可选的 opts 默认为不需

浏览器 - 移除监听事件

2019-11-27 描述从一个元素上移除一个事件监听。提示使用 EventTarget.removeEventListener()从一个元素上移除一个使用 EventTarget.addEventListener()方法添加的事件监听第四个参数 opts 的默认值使用 false,否则的话需使用监听事件被添加时候的选项代码 constoff=(el,evt,fn,opts=false)=>el.removeEv

浏览器 - 监听 DOM 的修改 (advanced)

2019-11-26 描述返回 MutationObserver 创建的对象,当指定的元素发生每一次变化时,都会运行提供的回调函数。提示使用 MutationObserver 观察给定元素的变化使用 Array.prototype.forEach()为每一次被检测到的变化执行回调第三个参数 options 的各项值都设置为 true,其具体说明可参见 MutationObserverInit 代码 constobserve

CSS 视觉 - :is/:matches/:any 选择器

2019-11-25 描述:is 将选择器列表作为参数,可以选中该列表中的与之匹配的任何元素。这样紧凑的写法对有含有很多选择器的样式非常有用。HTML<header><p>Thisismyheaderparagraph</p></header><main><ul><li><p>Thisismyfirst</p><p>listitem</p></li></ul></main><footer><p>This

浏览器 - 节点列表转换为数组

2019-11-22 描述将 NodeList 转换为列表。提示在数组的创建中使用扩展运算符将 NodeList 转换为一个数组当然,你也可以使用 Array.from,该方法可为一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。使用他可以进行简单的数组去重合并:functioncombine(){letarr=[].concat.apply([],arguments);//合并数组 returnArray

浏览器 - 标签页是否正在被浏览

2019-11-21 描述如果浏览器中的标签页面正在被浏览,请返回 true,否则的话返回 false。提示使用 Document.hidden 这个页面显示的 API 属性来检查浏览器中的标签页面是可见还是隐藏可结合 visibilitychange 事件对标题进行修改,效果可参见博客,具体代码如下:document.addEventListener('visibilitychange',function(){if

浏览器 - 在元素前插入 HTML

2019-11-20 描述在指定元素之前插入一个 HTML 字符串。提示使用位置参数为 beforebegin 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的前面位置参数可选值如下:beforebegin 元素之前 afterbegin 元素内部的第一个子节点之前 beforeend 元素内部的最后一个子节点之后 afterend 元素之后具体表现为 beforebegin