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

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

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

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

浏览器 - 表单转对象

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 中让人激动的新特性 ElectronElectron9.0.0 升级注意事项返回总目录每天 30 秒系列

浏览器 - 计数器 (advanced)

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

浏览器 - 拷贝到剪切板 (advanced)

2019-10-24 描述拷贝一个字符串到剪切板中。仅对用户操作的结果生效(如:内部 click 监听事件)。提示创建一个新的 <textarea> 元素,设置其 value 为提供的数据,并将他添加到 HTML 文档中如果页面中有元素被选中的话,使用 Selection.getRangeAt()来存储选中的值使用 document.execCommand('copy')将内容拷贝到剪切板从 HTML 文档中移除 <texta

浏览器 - 底部是否可见

2019-10-23 描述如果页面的底部可见就返回 true 否则返回 false。提示使用 scrollY,scrollHeight 和 clientHeight 来检测页面的底部是否可见代码 constbottomVisible=()=>document.documentElement.clientHeight+window.scrollY>=(document.documentElement.scrollHei

浏览器 - 数组转换为 HTML 列表

2019-10-22 描述将数组中的元素转换为 <li> 标签,并将他们添加到指定 id 的列表中。提示使用 Array.prototype.map(),document.querySelector()和一个内部匿名闭包来创建 HTML 列表内的标签项代码 constarrayToHtmlList=(arr,listID)=>(el=>((el=document.querySelector('#'+listID)),

React Visual - 树视图组件 (advanced)

2019-10-21 描述使用 JSON 或数组渲染一个内容可折叠的树视图。使用对象解构为特定的属性设置默认值使用 toggled 值来确定内容的初始化状态(展开/收拢)使用 React.setState()hook 创建 isToggled 状态变量,设置初始值为 toggled 属性返回一个 <div> 元素,他包裹着内容组件和用于切换组件 isToggled 状态的 <span> 元素基于 isParentToggled,isT

React Visual - 信息提示组件

2019-10-18 描述渲染一个信息提示组件。使用 React.useState()hook 创建一个默认值为 false 的状态变量 show 返回一个包含了两个 <div> 的 <div> 元素,他们分别用于显示提示和传递给组件的 children 监听 onMouseEnter 和 onMouseLeave 方法,分别用于 show 变量的切换当然,你也可以直接使用 CSS 交互-信息提示来实现实现.tooltip{position

三亚 9 天 8 夜穷游

出发前准备 2 天中陆陆续续定了机票、民宿,看了攻略,做了如下计划(最后一天去免税店)。然而这次的计划和实际差了太多太多,但这并不重要,因为玩的很开心。这次住在离大东海很近的金茂海景花园,无论去哪个景点都有直达的公交。离海步行 5 分钟,游回来有洗衣机、烘干机,很方便。如果将来有钱了,要来一次豪游:走 VIP 通道,直升机接送,住岛上,住海底房,海上各种项目来 2+ 次。呃,还是算了,作为一个内心节俭的妇女,玩的开

CSS 交互 - 信息提示

2019-10-17 描述当鼠标移上时,显示相关的信息提示。HTML<divclass="tooltip"><spanclass="tooltippedtooltipped__n"aria-label="我是提示信息"> 上居中 </span><spanclass="tooltippedtooltipped__s"aria-label="我是提示信息"> 下居中 </span><spanclass="tool

React Visual - 可切换组件

2019-10-16 描述渲染一个可切换组件。使用 React.useState()hook 初始化一个默认值为 false 的状态变量 isToggleOn 使用一个 style 对象为不同状态下的组件单独保存他们的样式返回一个 <button> 来切换组件的 isToggledOn。当触发他的 onClick 事件时,就会基于 isToggleOn 的状态来显示相应的内容,并使用 style 对象中对应的 CSS 规则实现 functi

React Visual - 自动计数器

2019-10-15 描述渲染一个自动计数器组件。使用 React.useState()hook 初始化一个默认值为 0 的状态变量 ticker 定义一个 tick 方法,他将基于 interval 间隔进行增长,直到增长为 timer 定义一个 reset 方法,他将重置 ticker 为 0 并清除 interval 返回一个包含两个 <button> 元素的 <div>,其按钮分别调用 tick 和 reset 方法实现 functionTicke