该目录是一些HTML集合, 包含了平时常见需求的简单实现, 可以打开控制台查看代码;
所有小案例都已经托管到了Github Pages上,点击图片即可跳转到预览链接汇总列表
点小按钮可以访问代码或者预览效果
| 1、++面试题 | </> 🌐 | 2、3D人体模型 | </> 🌐 | 3、3D轮播图 | </> 🌐 | 4、BFC | </> 🌐 |
| 5、BFC1 | </> 🌐 | 6、CSS-3D效果实现 | </> 🌐 | 7、Flip动画 | </> 🌐 | 8、H5文件操作及转换 | </> 🌐 |
| 9、H5流式下载 | </> 🌐 | 10、MessageChannel是宏任务还是微任务 | </> 🌐 | 11、UI渲染阻塞测试 | </> 🌐 | 12、array-flatten | </> 🌐 |
| 13、async-catch | </> 🌐 | 14、async-script | </> 🌐 | 15、async替代promise | </> 🌐 | 16、audio | </> 🌐 |
| 17、await同步监听事件 | </> 🌐 | 18、base64-file | </> 🌐 | 19、base64ToMp3 | </> 🌐 | 20、block | </> 🌐 |
| 21、canvas | </> 🌐 | 22、canvas圆环动画 | </> 🌐 | 23、canvas播放视频 | </> 🌐 | 24、chrome共享渲染进程 | </> 🌐 |
| 25、compose-函数组合 | </> 🌐 | 26、cross | </> 🌐 | 27、css-animation | </> 🌐 | 28、css-spread | </> 🌐 |
| 29、css转圈动画 | </> 🌐 | 30、debounce-throttle | </> 🌐 | 31、deep-clone | </> 🌐 | 32、demo | </> 🌐 |
| 33、eventloop | </> 🌐 | 34、fetch文件流处理 | </> 🌐 | 35、fetch测试 | </> 🌐 | 36、flex-basis | </> 🌐 |
| 37、for-await-of | </> 🌐 | 38、generator-run | </> 🌐 | 39、grid-hidden-row | </> 🌐 | 40、grid | </> 🌐 |
| 41、imports-map | </> 🌐 | 42、index | </> 🌐 | 43、instanceof | </> 🌐 | 44、ios测试背景不滚动 | </> 🌐 |
| 45、jobs-tasks | </> 🌐 | 46、jquery-anchor-scroll | </> 🌐 | 47、js加载顺序 | </> 🌐 | 48、js无法识别的字符u+2028 | </> 🌐 |
| 49、js的阻塞解析 | </> 🌐 | 50、link-source | </> 🌐 | 51、linked-list | </> 🌐 | 52、location | </> 🌐 |
| 53、longzhu | </> 🌐 | 54、maiaH5 | </> 🌐 | 55、memery-leak | </> 🌐 | 56、node-eventloop | </> 🌐 |
| 57、node中事件循环 | </> 🌐 | 58、promise-catch | </> 🌐 | 59、promise | </> 🌐 | 60、raf与microtask的关系 | </> 🌐 |
| 61、redux-interface | </> 🌐 | 62、requestIdleCb | </> 🌐 | 63、ric长任务测试 | </> 🌐 | 64、saa | </> 🌐 |
| 65、sdk测试 | </> 🌐 | 66、secret | </> 🌐 | 67、sort-algrom | </> 🌐 | 68、svg-sprites | </> 🌐 |
| 69、svga-web-player | </> 🌐 | 70、symbolToPrimitive | </> 🌐 | 71、t | </> 🌐 | 72、table溢出父元素 | </> 🌐 |
| 73、text-shape | </> 🌐 | 74、transform-origin | </> 🌐 | 75、translate3d | </> 🌐 | 76、video-stream | </> 🌐 |
| 77、vue-$attrs-$listeners | </> 🌐 | 78、vue-parent调用child方法的多种实现 | </> 🌐 | 79、vue-runtime-with-compiler调试 | </> 🌐 | 80、vue-异步更新队列 | </> 🌐 |
| 81、vue2-observer | </> 🌐 | 82、vue3-demos | </> 🌐 | 83、vue图片懒加载 | </> 🌐 | 84、vue滑动卡片跟随 | </> 🌐 |
| 85、vue转盘抽奖 | </> 🌐 | 86、vue通信 | </> 🌐 | 87、web-components | </> 🌐 | 88、webworker大文件分片 | </> 🌐 |
| 89、while | </> 🌐 | 90、writing-mode居中 | </> 🌐 | 91、yts | </> 🌐 | 92、z-index | </> 🌐 |
| 93、上传下载的进度监控实现 | </> 🌐 | 94、两栏布局 | </> 🌐 | 95、中断和恢复串行任务序列 | </> 🌐 | 96、事件捕获和冒泡 | </> 🌐 |
| 97、二维码弹窗原生dailog组件 | </> 🌐 | 98、交换元素 | </> 🌐 | 99、仿chatGPT显示效果 | </> 🌐 | 100、使用原生waap实现动画i | </> 🌐 |
| 101、依赖注入 | </> 🌐 | 102、保留三位小数 | </> 🌐 | 103、修改esm模块内部状态 | </> 🌐 | 104、全局异常捕获 | </> 🌐 |
| 105、共享词法作用域的内存泄露 | </> 🌐 | 106、击鼓传花 | </> 🌐 | 107、双飞翼&圣杯布局 | </> 🌐 | 108、周期性内存泄露 | </> 🌐 |
| 109、图片压缩compress | </> 🌐 | 110、图片懒加载 | </> 🌐 | 111、声明提前 | </> 🌐 | 112、子元素高度继承 | </> 🌐 |
| 113、对称按钮 | </> 🌐 | 114、对象keyvalue映射 | </> 🌐 | 115、尾递归 | </> 🌐 | 116、层叠上下文1 | </> 🌐 |
| 117、居中问题 | </> 🌐 | 118、建树 | </> 🌐 | 119、手写jsonp | </> 🌐 | 120、手写promise | </> 🌐 |
| 121、找到页面所有可以滚动的元素 | </> 🌐 | 122、拖拽排序 | </> 🌐 | 123、数组转树结构实现 | </> 🌐 | 124、文字翻转 | </> 🌐 |
| 125、文本选区range | </> 🌐 | 126、星空效果 | </> 🌐 | 127、最长递增子序列 | </> 🌐 | 128、深度优先和广度优先算法 | </> 🌐 |
| 129、渲染竞态 | </> 🌐 | 130、渲染阻塞 | </> 🌐 | 131、滑动跟随动画 | </> 🌐 | 132、滑块动画 | </> 🌐 |
| 133、滚动锚定 | </> 🌐 | 134、滚轮横向滚动 | </> 🌐 | 135、父元素高度 | </> 🌐 | 136、私有属性 | </> 🌐 |
| 137、策略模式进行表单验证 | </> 🌐 | 138、红绿灯 | </> 🌐 | 139、网页位置 | </> 🌐 | 140、耗时微任务对事件循环的影响 | </> 🌐 |
| 141、聚焦的游离节点的内存泄露 | </> 🌐 | 142、自动宽度 | </> 🌐 | 143、获取vue根实例 | </> 🌐 | 144、视察滚动 | </> 🌐 |
| 145、转圈动画 | </> 🌐 | 146、递归 | </> 🌐 | 147、长列表优化 | </> 🌐 | 148、高度自适应 | </> 🌐 |