浏览器 - 设备检测 2019-11-04 描述检测网站是使用移动设备还是使用台式机/笔记本打开的。提示使用正则表达式来检测 navigator.userAgent，以获取当前设备是移动设备还是台式机/笔记本代码 constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.use 30Seconds JavaScript Code
浏览器 - 获取当前链接 2019-11-01 描述返回当前页面的链接。提示使用 window.location.href 获取当前链接代码 constcurrentURL=()=>window.location.href;示例事件中心的调用：currentURL();//'https://hacpai.com/article/1572572694000?r=Vanessa'返回总目录每天 30 秒系列之 JavaScript 代码 30Seconds JavaScript Code
Vue 3 中让人激动的新特性 2019-10-31CompositionAPICompositionAPI 是一组基于功能的附加的 API，他允许对组件之间的逻辑进行灵活的组合，他将组件属性中当前可用的机制公开为 JavaScript 函数。更多可查看 CompositionAPIRFCimport{ref,computed,onMounted}from'vue'exportdefault{setup(){constcount=ref(0 30Seconds 资讯 Vue.js
浏览器 - 创建一个事件中心 2019-10-30 描述使用 emit，on 和 off 方法创建一个发布/订阅(publish–subscribe)的事件中心。提示使用 Object.create(null)创建一个空的 hub 对象，他不需要继承来自 Object.prototype 的属性 emit，首先基于 event 参数找到数组中对应的一组操作，然后使用 Array.prototype.forEach()运行这组操作中的每一项，其参数都为 dat JavaScript 30Seconds Code
浏览器 - 元素的创建 2019-10-29 描述根据字符串（不需要添加到文档中）创建一个元素。如果给定的字符串包含多个元素，仅返回第一个。提示使用 document.createElement()创建一个新元素设置他的 innerHTML 等于作为参数提供的字符串使用 ParentNode.firstElementChild 返回第一个元素代码 constcreateElement=str=>{constel=document.cre 30Seconds JavaScript Code
每天 30 秒系列之前端资讯 整理前端界的最新资讯，邀您一同探索新世界 TypeScriptTypeScript3.7RC 发布，支持可选链等功能特性 VueVue3 中让人激动的新特性 ElectronElectron9.0.0 升级注意事项 DenoDeno1.0 发布，与 Node 相比的 10 大优缺点 Deno 将永远支持 TypeScript 返回总目录每天 30 秒系列 30Seconds 资讯
TypeScript 3.7 RC 发布，支持可选链等功能特性 2019-10-28 可选链 OptionalChaining 提案//之前 if(foo&&foo.bar&&foo.bar.baz){//...}//之后 if(foo?.bar?.baz){//...}空值合并 NullishCoalescing 提案//之前 letx=(foo!==null&&foo!==undefined)?foo:bar();//之后 letx=foo??bar();断言函数 Assert 30Seconds news TypeScript
浏览器 - 计数器 (advanced) 2019-10-25 描述根据特定的范围、步骤和持续时间在指定的选择器上创建一个计数器。提示检查 step 是否符合要求，并进行相应的修改在 setInterval()中使用 Math.abs()和 Math.floor()的组合来对每一次绘制计数器的间隔时间进行计算使用 document.querySelector().innerHTML 来更新选中元素的值第四个参数 step 的默认值为 1 第五个参数 duration 30Seconds JavaScript Code
浏览器 - 拷贝到剪切板 (advanced) 2019-10-24 描述拷贝一个字符串到剪切板中。仅对用户操作的结果生效（如：内部 click 监听事件）。提示创建一个新的 <textarea> 元素，设置其 value 为提供的数据，并将他添加到 HTML 文档中如果页面中有元素被选中的话，使用 Selection.getRangeAt()来存储选中的值使用 document.execCommand('copy')将内容拷贝到剪切板从 HTML 文档中移除 <texta 30Seconds JavaScript Code
浏览器 - 底部是否可见 2019-10-23 描述如果页面的底部可见就返回 true 否则返回 false。提示使用 scrollY，scrollHeight 和 clientHeight 来检测页面的底部是否可见代码 constbottomVisible=()=>document.documentElement.clientHeight+window.scrollY>=(document.documentElement.scrollHei 30Seconds JavaScript Code
浏览器 - 数组转换为 HTML 列表 2019-10-22 描述将数组中的元素转换为 <li> 标签，并将他们添加到指定 id 的列表中。提示使用 Array.prototype.map()，document.querySelector()和一个内部匿名闭包来创建 html 列表内的标签项代码 constarrayToHtmlList=(arr,listID)=>(el=>((el=document.querySelector('#'+listID)), 30Seconds JavaScript Code
React Visual - 树视图组件 (advanced) 2019-10-21 描述使用 JSON 或数组渲染一个内容可折叠的树视图。使用对象解构为特定的属性设置默认值使用 toggled 值来确定内容的初始化状态（展开/收拢）使用 React.setState()hook 创建 isToggled 状态变量，设置初始值为 toggled 属性返回一个 <div> 元素，他包裹着内容组件和用于切换组件 isToggled 状态的 <span> 元素基于 isParentToggled，isT 30Seconds React
React Visual - 信息提示组件 2019-10-18 描述渲染一个信息提示组件。使用 React.useState()hook 创建一个默认值为 false 的状态变量 show 返回一个包含了两个 <div> 的 <div> 元素，他们分别用于显示提示和传递给组件的 children 监听 onMouseEnter 和 onMouseLeave 方法，分别用于 show 变量的切换当然，你也可以直接使用 CSS 交互-信息提示来实现实现.tooltip{position 30Seconds React
三亚 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 30Seconds CSS
React Visual - 可切换组件 2019-10-16 描述渲染一个可切换组件。使用 React.useState()hook 初始化一个默认值为 false 的状态变量 isToggleOn 使用一个 style 对象为不同状态下的组件单独保存他们的样式返回一个 <button> 来切换组件的 isToggledOn。当触发他的 onClick 事件时，就会基于 isToggleOn 的状态来显示相应的内容，并使用 style 对象中对应的 CSS 规则实现 functi 30Seconds React
React Visual - 自动计数器 2019-10-15 描述渲染一个自动计数器组件。使用 React.useState()hook 初始化一个默认值为 0 的状态变量 ticker 定义一个 tick 方法，他将基于 interval 间隔进行增长，直到增长为 timer 定义一个 reset 方法，他将重置 ticker 为 0 并清除 interval 返回一个包含两个 <button> 元素的 <div>，其按钮分别调用 tick 和 reset 方法实现 functionTicke 30Seconds React
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 30Seconds React
有黑客想改变身份成画家么 想变为画家嘛？想在黑客和画家之间变来变去么？大概什么情况会触发你转变身份？很多年过去了，随着社区的成长，该服务已经停止。请挖坟的小伙伴们不要再进行打赏了，否则后果自负。 黑客派 画家
React Visual - 星级比率组件 2019-10-13 描述渲染一个星级比率组件。定义一个组件，每颗星星都根据父组件的状态单独调用 Star 进行渲染显示在 StarRating 组件中使用 React.useState()hook 定义 rating 和 selection 状态变量，并分别初始化他们的值为 props.rating（如果无效或不支持时为 0）和 0 创建一个 hoverOver 方法，通过提供的 event 来更新 selected 和 rating 使用 A 30Seconds React