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

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

浏览器 - 底部是否可见

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

React Visual - 文件的拖拽

2019-10-08 描述渲染一个单个文件的拖拽组件。为组件创建一个名为 dropRef 的 ref 使用 React.useState()hook 创建 drag 和 filename 变量,分别初始化为 false 和''。dragCounter 和 drag 变量用于检测一个文件是否正在被拖拽,而 filename 用于存储被拖拽后的文件的名称创建 handleDrag,handleDragIn,handleDragOut 和 han

['1', '7', '11'].map(parseInt) 的输出结果是?

2019-09-30 回答[1,NaN,3]加分回答 parseInt(string,radix)将一个字符串转换为 radix 进制的整数。如果 string 无法被转化成数值类型将会返回 NaN。radix 为介于 2-36 之间的整数,通常默认值为 10,始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。很多 lint 工具都会默认开启此项的校验 map 在每次迭代时都会将 value,index,array 三

React Visual - 时钟倒数计时器 (advanced)

2019-09-29 描述渲染一个倒数计时器,当其为 0 时打印一条消息。使用对象解构设置默认的 hours、minutes 和 seconds 属性使用 React.useState()hook 创建 time、paused 和 over 状态变量,他们的默认值分别为传入的属性、false 和 false 创建一个 tick 方法,基于当前的值更新 time 值(如:每次减少 1 秒)如果 paused 或者 over 的值为 true,tick 方法

React Visual - 折叠组件

2019-09-27 描述渲染一个内容可折叠的组件。使用 React.setState()hook 创建一个 isCollapsed 状态变量,其默认值为 props.collapsed 使用一个 style 对象分别为组件保存各自的样式和他们的状态使用一个 <div> 将改变组件 isCollapsed 状态的 <button> 及通过 props.children 传递的内容的 <div> 进行包裹基于 isCollapsed 应用 st

React Visual - 轮播组件

2019-09-26 描述渲染一个轮播组件。使用 React.setState()hook 创建一个 active 状态变量,设置默认值为 0(第一个元素的索引).使用一个 style 对象分别为组件保存各自的样式使用 React.useEffect()hook 更新 active 值为下一个元素的索引,可以使用 setInterval 解构 props,根据 active 和 index 对轮播组件中的每一项进行可见样式的设置,并将其