ASkyBig/demo

一些简单的 demo

React_demo

• counter: 父组件通过 props 传值，子组件通过回调函数向父组件传值。

• counter-with-Redux: 改进了 counter 的例子，使用了 Redux

• counter-with-context: 利用 context 传递 store，避免 store 不必要的传递。

• counter-with-react-redux.html: 改进了 counter-with-Redux 的例子，使用了 react-redux

• Higher-Order-Components.html: 高阶组件demo，提取通用逻辑

• simple-comment: 简单评论与展示

• percent_calculate: 数字变成百分比

CSS_demo

• CSS进度条: 百分比、分段进度条。

• CSS展开菜单: 下拉菜单。

• 特殊icon :特殊icon。

JavaScript_demo

• 浏览器选项卡标题内容切换闪烁

  当页面不可见，页面的选项卡标题以 500ms 间隔在原标题和“你有新消息”之间切换闪烁；当处于 focus 状态时，页面标题还原，取消闪烁。

• 简单的弹窗modal

  utils.modal_alert(content, position, time);
  
    content: 可选，弹窗内容
    position: 可选，弹窗位置（只写了两个，center 和 bottom）
    time: 可选， 弹窗出现时间
  

• js 删除、添加 HTML 文档上的注释

  观察控制台元素

• 原生js 实现 h5 列表下拉刷新加载

  控制台打开「客户端模式」，就是那个小手机。另外，滑的慢一点，这个接口好像不太给力。

• shadow dom demo shadow dom 的 demo 展示

• longPress demo 原生模拟 longPress，可以框选。

  长按盒子背景高亮，普通点击无变化，点击空白，移除所有高亮； 长按拖动鼠标，框选范围所有盒子高亮；

• form demo 原生表单里面的 button 如果不加类型也会自动触发表单提交。

• 距离当前的时间

  • 刚刚 （1分钟内）
  • xx 分钟前
  • xx 小时前
  • xx 天前
  • xx 个月前
  • xx 年前

  ---

  • 刚刚 （1分钟内）
  • xx 分钟前
  • 今天 xx:xx
  • 昨天 xx:xx
  • 前天 xx:xx
  • xx-xx xx:xx
  • xxxx-xx-xx

• JSONP demo

  文件链接