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

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

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

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

浏览器 - 计数器 (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

React Visual - Tab 组件

2019-10-14 描述渲染一个 Tab 菜单及其视图组件。定义一个 TabItem 组件,可以传递给 Tab 且只接受 props.children 中通过函数名称认证的 TabItem,其余节点需要进行移除使用 React.useState()hook 初始化 bindIndex 状态变量的值为 props.defaultIndex 使用 Array.prototype.map 将收集的节点渲染为 tab-menu 和 tab-vie

有黑客想改变身份成画家么

想变为画家嘛?想在黑客和画家之间变来变去么?大概什么情况会触发你转变身份?很多年过去了,随着社区的成长,该服务已经停止。请挖坟的小伙伴们不要再进行打赏了,否则后果自负。

React Visual - 星级比率组件

2019-10-13 描述渲染一个星级比率组件。定义一个组件,每颗星星都根据父组件的状态单独调用 Star 进行渲染显示在 StarRating 组件中使用 React.useState()hook 定义 rating 和 selection 状态变量,并分别初始化他们的值为 props.rating(如果无效或不支持时为 0)和 0 创建一个 hoverOver 方法,通过提供的 event 来更新 selected 和 rating 使用 A

React Visual - 带波浪效果的按钮

2019-10-12 描述渲染一个当点击后有波浪动画效果的按钮。为波浪效果定义一些适当的 CSS 样式和动画使用 React.useState()hook 为坐标和按钮的动画状态创建变量使用 React.useEffect()hook 来更新动画状态,每当坐标状态变量修改时,就开始进行动画在动画播放结束后,使用前一个 hook 中的 UsesetTimeout()来对动画进行清除每当 isRippling 状态变量为 fal

React Visual - 弹窗组件

2019-10-11 描述渲染一个可通过事件控制的弹窗组件。使用该组件时,只需要 importModal 一次,然后通过传递给 isVisible 属性的一个布尔值来进行显示。使用对象解构为弹窗组件的特定属性设置默认值定义一个处理所有键盘事件的方法 keydownHandler,他可以根据你的需要进行操作(如:当按下 Esc 时关闭弹窗组件)使用 UseReact.useEffect()hook 对键盘监听事件进行添加

React Visual - 邮件发送组件

2019-10-10 描述渲染一个可以发送邮件的格式化的链接。解构组件中的属性,使用 email,subject 和 body 创建一个拥有适当 href 属性的 <a> 元素使用 props.children 作为链接内容进行渲染实现 functionMailto({email,subject,body,...props}){return(<ahref={`mailto:${email}?subject=${encode

React Visual - 旋转加载组件

2019-10-09 描述创建一个旋转加载的组件。为组件中的元素定义适当的 CSS 样式和动画定义一个组件,返回一个简单的 SVG,其大小可以通过 size 属性进行设置当然,你也可以直接使用 CSS 动画 🍩式的旋转来实现实现.loader{animation:rotate2slinearinfinite;}@keyframesrotate{100%{transform:rotate(360deg);}}.load