Demo

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #llm #machine-learning #rust #linux #docker #awesome #cli #vue #ios #open-source

(★ 120)

Practice Demo and Article

Demo Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 小皮咖 Demo

**ps:我写了一本前端进阶小书，推荐给大家 [github 地址](https://github.com/zxpsuper/advanced_front_end)**

## 项目介绍

-   在这里记录着自己写文章，做项目存放的一些 demo 和 源码。

-   欢迎大家到 Issues 交流，鼓励 PR，感谢 Star、感谢 watch，大家有啥好的建议可以加我微信一起交流讨论！
-   **欢迎添加微信拉你进前端交流分享群，海量视频学习资源共享一同成长！**
<div>
  <img src="./images/suporka.jpg" style="width: 320px; margin: 0 auto; display: block">
</div>

**备注：**

> 在 github 项目的右上角，有三个按钮,分别是 watch、star、fork，新来的同学注意不要用错了，无休止的邮件提醒会给你造成不必要的信息干扰。
>
> 当你选择 Watching，表示你以后会关注这个项目的全部动态，以后只要这个项目发生变动，被别人提交了 pull request、被发起了 issue 等情况你都会收到邮件通知。
>
> star 相当于是点赞或收藏，方便以后查找。
>
> fork 表示你想要补充完善这个项目的内容。

![](https://raw.githubusercontent.com/zxpsuper/Demo/master/images/fork_and_star.jpg)

## demo 模块

| 模块                                    | 文章                                                                                                        | demo                                                                | 源码                                                                                    |
| :-------------------------------------- | :---------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- |
| 1. CANVAS 页面时钟                      | [CANVAS 页面时钟](https://blog.csdn.net/weixin_38788347/article/details/78239704)                           | [demo](https://zxpsuper.github.io/Demo/watch.html)                  | [源码](./watch.html)                                                                    |
| 2. Quill 富文本编辑器                   | [quill——简单的富文本编辑器](https://blog.csdn.net/weixin_38788347/article/details/78249433)                 | [demo](https://zxpsuper.github.io/Demo/quill.html)                  | [源码](./quill.html)                                                                    |
| 3. 拖曳效果                             | [利用 JQ 实现简单的拖曳效果](https://blog.csdn.net/weixin_38788347/article/details/78273565)                | [demo](https://zxpsuper.github.io/Demo/drag.html)                   | [源码](./drag.html)                                                                     |
| 4. 图片懒加载                           | [懒加载](https://blog.csdn.net/weixin_38788347/article/details/78217372)                                    | [demo](https://zxpsuper.github.io/Demo/lazyload.html)               | [源码](./lazyload.html)                                                                 |
| 5. websocket                            | [使用 socket.io.js 实现 websocket 实时通讯](https://blog.csdn.net/weixin_38788347/article/details/79726992) | --                                                                  | [源码](./websocket/)                                                                    |
| 6. 瀑布流的实现                         | [瀑布流布局的实现](https://blog.csdn.net/weixin_38788347/article/details/78390064)                          | --                                                                  | --                                                                                      |
| --                                      | CSS 实现瀑布流                                                                                              | [demo](https://zxpsuper.github.io/Demo/waterflow/waterfallcss.html) | [源码](./waterflow/waterfallcss.html)                                                   |
| --                                      | JAVASCRIPT 实现瀑布流                                                                                       | [demo](https://zxpsuper.github.io/Demo/waterflow/waterfalljs.html)  | [源码](./waterflow/waterfalljs.html)                                                    |
| --                                      | JQUERY 实现瀑布流                                                                                           | [demo](https://zxpsuper.github.io/Demo/waterflow/waterfalljq.html)  | [源码](./waterflow/waterfalljq.html)                                                    |
| 7. CANVAS 刮奖小 Demo                   | [canvas 实现刮刮乐](https://blog.csdn.net/weixin_38788347/article/details/78239704)                         | [demo](https://zxpsuper.github.io/Demo/guajiang/index.html)         | [源码](./guajiang/index.html)                                                           |
| 8. VUE 时间选择器                       | [vue 手写一个时间选择器](https://juejin.im/post/5b62b0cfe51d453489494efb)                                   | [demo](https://zxpsuper.github.io/Demo/datepicker/index.html)       | [源码](./datepicker/Datepicker.vue)                                                     |
| 9. ES6 手写一个“辨色”小游戏             | [ES6 手写一个“辨色”小游戏](https://segmentfault.com/a/1190000016444812)                                     | [demo](https://zxpsuper.github.io/Demo/color/index.html)            | [源码](./color/index.js)                                                                |
| 10. 一款轮播组件的诞生                  | [一款轮播组件的诞生](https://juejin.im/post/5c24925fe51d4502a232fb6b)                                       | [demo](https://zxpsuper.github.io/Demo/carousal/index.html)         | [源码](https://github.com/zxpsuper/suporka-carousal)                                    |
| 11. 情人节撸一个表白页面                | [情人节撸一个表白页面](https://juejin.im/post/5c6521b8f265da2dcd79ca74)                                     | [demo](https://zxpsuper.github.io/Demo/valentine_day/name.html)     | [源码](https://github.com/zxpsuper/Demo/tree/master/valentine_day)                      |
| 12. 小皮咖导航                          | --                                                                                                          | [demo](https://zxpsuper.github.io/Demo/navigation/)                 | [源码](https://github.com/zxpsuper/Demo/tree/master/navigation)                         |
| 13. 二维码的生成                        | [Canvas 进阶（一）二维码的生成与扫码识别](https://juejin.im/post/5d00b3626fb9a07ed74076a9)                  | [demo](https://zxpsuper.github.io/Demo/qrcode/)                     | [源码](https://github.com/zxpsuper/Demo/blob/master/qrcode/index.html)                  |
| 14. 二维码的扫码识别                    | [Canvas 进阶（一）二维码的生成与扫码识别](https://juejin.im/post/5d00b3626fb9a07ed74076a9)                  | [demo](https://zxpsuper.github.io/Demo/qrcode/qrcode-scan.html)     | [源码](https://github.com/zxpsuper/Demo/tree/master/qrcode)                             |
| 15. 写一个生成带 logo 的二维码 npm 插件 | [Canvas 进阶（二）写一个生成带 logo 的二维码 npm 插件](https://juejin.im/post/5d1c461f6fb9a07f070e4768)     | [demo](https://zxpsuper.github.io/qrcode-with-logos/dist/)          | [源码](https://github.com/zxpsuper/qrcode-with-logos)                                   |
| 16. Typescript 手写辨色小游戏           | [Canvas 进阶（三）ts + canvas 重写”辨色“小游戏](https://juejin.im/post/5d22af2b6fb9a07ea7133361)            | [demo](https://zxpsuper.github.io/Demo/color/colorTs.html)          | [源码](https://github.com/zxpsuper/Demo/tree/master/color)                              |
| 17. 实现一个“刮刮乐”游戏                | [Canvas 进阶（四）实现一个“刮刮乐”游戏](https://juejin.im/post/5d664786f265da03ee6a694f)                    | [demo](https://zxpsuper.github.io/Demo/letter/)                     | [源码](https://github.com/zxpsuper/Demo/blob/master/letter/scrapAward-dev.js)           |
| 18. 拼图小游戏                          | [玩法：拼图小游戏（将 1-9 按顺序排在中间位置即可）](./images/number-game.jpg)                               | [demo](https://zxpsuper.github.io/Demo/numbergame/)                 | [源码](https://github.com/zxpsuper/Demo/blob/master/numbergame/index.js)                |
| 19. 小皮咖图像滤镜                      | [Canvas 进阶（五）实现图片滤镜效果](https://juejin.im/post/5dfb15b96fb9a016164362b2)                        | [demo](https://zxpsuper.github.io/Demo/suporka_image_filter/)       | [源码](https://github.com/zxpsuper/Demo/blob/master/suporka_image_filter/index.html)    |
| 20. 简单轮播图                          | --                                                                                                          | [demo](https://zxpsuper.github.io/Demo/carousal/carousal.html)      | [源码](https://github.com/zxpsuper/Demo/blob/master/carousal/carousal.html)             |
| 21. hash 路由                           | [简易路由实现——（hash 路由）](https://juejin.im/post/5e4a875c6fb9a07c846b685e)                              | [demo](https://zxpsuper.github.io/Demo/htmlRouter/#/monday)         | [源码](https://github.com/zxpsuper/Demo/tree/master/htmlRouter)                         |
| 22. history 路由                        | [简易路由实现——（history 路由）](https://juejin.im/post/5e4a875c6fb9a07c846b685e)                           | [demo](https://zxpsuper.github.io/Demo/htmlRouter/history.html)     | [源码](https://github.com/zxpsuper/Demo/tree/master/htmlRouter)                         |
| 22. 图片压缩                            | [Canvas 进阶（六）实现图片压缩功能](https://juejin.im/post/5e4e75c8518825493c7b52a3)                        | [demo](https://zxpsuper.github.io/Demo/imageCompress/)              | [源码](https://github.com/zxpsuper/Demo/tree/master/imageCompress/imageCompress-dev.js) |
| 23. vue 实现数独（做了些优化）          | [用 vue 开发一个所谓的数独](https://juejin.im/post/5a3b02026fb9a0451a7689fd)                                | [demo](https://zxpsuper.github.io/Demo/sudoku/)                     | [源码](https://github.com/zxpsuper/Demo/tree/master/sudoku/index.html)                  |
| 24. 雪花飞舞效果                        | --                                                                                                          | [demo](https://zxpsuper.github.io/Demo/other/snowflake.html)        | [源码](https://github.com/zxpsuper/Demo/tree/master/other/snowflake.html)               |

## 关于作者 :boy:

作者： 小皮咖

Email：zxpscau@163.com

Github: https://github.com/zxpsuper

知乎：https://www.zhihu.com/people/super-32-94-54/activities

掘金：https://juejin.im/user/5af17df4518825672a02e1f5

对内容有任何疑问，欢迎联系我。

Demo

Demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Demo

Demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README