🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

浏览器 - 在元素尾部插入 HTML

2019-11-19 描述在指定元素的尾部后插入一个 HTML 字符串。提示使用位置参数为 afterend 的 el.insertAdjacentHTML()方法将解析好的 htmlString 插入到 el 元素的尾部后面 insertAdjacentHTML 不会重新解析自身正在使用的元素,因此元素内部的现有元素不会被破坏。这避免了额外的序列化步骤,使其比 innerHTML 操作更快代码 constinsertAfter

浏览器 - https 重定向

2019-11-18 描述如果页面当前是 HTTP,把他重定向到 HTTPS。除此外,还应替换他的历史,以便按下返回按钮时,并不会让他返回 HTTP 页面。提示使用 location.protocol 获取当前使用的协议如果不是 HTTPS,使用 location.replace()将当前页面替换为 HTTPS 使用 location.href 获取完整的地址,使用 String.prototype.split()将协议部分从

浏览器 - 隐藏元素

2019-11-15 描述隐藏所有指定的元素。提示使用 NodeList.prototype.forEach()让每一个指定的元素都可以设置其样式 display 的值为 none 当然,我们也可以使用 visibility:hidden。其区别如下:visibility:hidden 可以隐藏元素,但该元素在布局中依然占用空间。如果设置了该样式的子元素 visibility 为 visible,那么其子元素可见 disp

浏览器 - 使用 SHA-256 创建一个 hash (advanced)

2019-11-14 描述使用 SHA-256 算法为一个值创建一个 hash,然后返回一个 promise。提示使用 SubtleCryptoAPI 为给定的值创建一个 hashcrypto.subtle 在不安全的上下文中将会返回 undefined 代码 consthashBrowser=val=>crypto.subtle.digest('SHA-256',newTextEncoder('utf-8').encod

浏览器 - 是否包含 class

2019-11-13 描述如果元素有指定的 class 就返回 true,否则返回 false。提示使用 element.classList.contains()来检测元素是否有特定的 classclassList 是替代使用空格进行分隔的字符串 element.className 来访问类的一种更方便的方法虽然 element.classList 为只读属性,但是可以使用 add()和 remove()方法对他进行修改代码 c

浏览器 - 获取样式

2019-11-12 描述为指定的元素返回某个特定的 CSS 值。提示使用 Window.getComputedStyle()获取指定元素的 CSS 值 getComputedStyle 还可以从伪元素中获取样式信息(如:::after,::before,::marker 等)getComputedStyle 的返回值是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身代码 con

浏览器 - 获取滚动位置

2019-11-11 描述返回当前页面的滚从位置。提示如果 pageXOffset 和 pageYOffset 存在就使用他们,否则的话就使用 scrollLeft 和 scrollTop 可以使用 window 来作为参数 el 的默认值代码 constgetScrollPosition=(el=window)=>({x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollL

Vditor v1.9.7 发布,支持标题锚点、语音阅读渲染

v1.9.7 简介该版本主要为 Markdown 的渲染提供了更多的支持和配置。其主要特性如下:支持代码高亮对行号的配置:options.preview.hljs.lineNumber 对选中的文本进行阅读:speechRender 为标题添加了锚点:#163 添加了初始化后的回调方法:options.after 修改静态方法 preview,以支持多次渲染在此感谢 547176052 反馈的 bug 和建议。v1.9.7

浏览器 - 获取图片地址

2019-11-08 描述获取一个元素中的所有图片,并将他们放到一个数组中。提示对提供的元素使用 Element.prototype.getElementsByTagName()方法来获取所有 <img> 元素使用 Array.prototype.map()来获取每一个图片元素中的 src 属性 includeDuplicates 参数的默认值为 false,表示需要过滤掉重复的图片地址创建一个 Set 来移除重复的图片地

浏览器 - 表单转对象

2019-11-07 描述将表单中的一组元素编码为一个 object。提示使用 FormData 构造器将 HTML 中的 form 转换为 FormData 使用 Array.from()将 FormData 转化为数组使用 Array.prototype.reduce()从数组中构建对象代码 constformToObject=form=>Array.from(newFormData(form)).reduce((acc,[

浏览器 - 元素在屏幕中是否可见 (advanced)

2019-11-06 描述如果指定元素在屏幕中可见则返回 true,否则返回 false。提示使用 Element.getBoundingClientRect()和 window.inner(Width|Height)的值来检测给定的元素在屏幕中是否可见第二个可省略的参数用来检测元素是否全部可见。如果要检测元素是否只有部分可见的话,请传入 true 当然你也可以使用 IntersectionObserver 代码 co

浏览器 - 父元素中是否包含子元素

2019-11-05 描述如果 parent 元素中包含 child 元素的话,返回 true,否则返回 false。提示检查 parent 是否和使用 child 是同一个元素使用 parent.contains(child)检查 parent 元素是否包含了 child 元素代码 constelementContains=(parent,child)=>parent!==child&&parent.contains(child)

浏览器 - 设备检测

2019-11-04 描述检测网站是使用移动设备还是使用台式机/笔记本打开的。提示使用正则表达式来检测 navigator.userAgent,以获取当前设备是移动设备还是台式机/笔记本代码 constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.use

浏览器 - 获取当前链接

2019-11-01 描述返回当前页面的链接。提示使用 window.location.href 获取当前链接代码 constcurrentURL=()=>window.location.href;示例事件中心的调用:currentURL();//'https://hacpai.com/article/1572572694000?r=Vanessa'返回总目录每天 30 秒系列之 JavaScript 代码

Vue 3 中让人激动的新特性

2019-10-31CompositionAPICompositionAPI 是一组基于功能的附加的 API,他允许对组件之间的逻辑进行灵活的组合,他将组件属性中当前可用的机制公开为 JavaScript 函数。更多可查看 CompositionAPIRFCimport{ref,computed,onMounted}from'vue'exportdefault{setup(){constcount=ref(0

浏览器 - 创建一个事件中心

2019-10-30 描述使用 emit,on 和 off 方法创建一个发布/订阅(publish–subscribe)的事件中心。提示使用 Object.create(null)创建一个空的 hub 对象,他不需要继承来自 Object.prototype 的属性 emit,首先基于 event 参数找到数组中对应的一组操作,然后使用 Array.prototype.forEach()运行这组操作中的每一项,其参数都为 dat

浏览器 - 元素的创建

2019-10-29 描述根据字符串(不需要添加到文档中)创建一个元素。如果给定的字符串包含多个元素,仅返回第一个。提示使用 document.createElement()创建一个新元素设置他的 innerHTML 等于作为参数提供的字符串使用 ParentNode.firstElementChild 返回第一个元素代码 constcreateElement=str=>{constel=document.cre

每天 30 秒系列之前端资讯

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

浏览器 - 计数器 (advanced)

2019-10-25 描述根据特定的范围、步骤和持续时间在指定的选择器上创建一个计数器。提示检查 step 是否符合要求,并进行相应的修改在 setInterval()中使用 Math.abs()和 Math.floor()的组合来对每一次绘制计数器的间隔时间进行计算使用 document.querySelector().innerHTML 来更新选中元素的值第四个参数 step 的默认值为 1 第五个参数 duration