# js-demo

**Repository Path**: qxscj/js-demo

## Basic Information

- **Project Name**: js-demo
- **Description**: 前端石头（抖音/B站）案例教学demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 283
- **Forks**: 114
- **Created**: 2022-10-24
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# js-demo

#### 介绍
前端石头（抖音/B站）案例教学demo

#### 软件架构
原生js练习demo，特别注意：运行请使用http的方式，不要直接双击html文件的方式打开！

### 文件导航
* html+css/2.html [时钟效果](https://gitee.com/qxscj/js-demo/blob/master/html+css/11.html)
* html+css/3-2.html [无限滚动轮播图](https://gitee.com/qxscj/js-demo/blob/master/html+css/3-2.html)
* html+css/4.html [自适应弹窗](https://gitee.com/qxscj/js-demo/blob/master/html+css/4.html)
* html+css/5.html [手写签名](https://gitee.com/qxscj/js-demo/blob/master/html+css/5.html)
* html+css/6.html [倒水游戏](https://gitee.com/qxscj/js-demo/blob/master/html+css/6.html)
* html+css/7.html [贪吃蛇](https://gitee.com/qxscj/js-demo/blob/master/html+css/7.html)
* html+css/8.html [字符动画](https://gitee.com/qxscj/js-demo/blob/master/html+css/8.html)
* html+css/9.html [俄罗斯方块](https://gitee.com/qxscj/js-demo/blob/master/html+css/9.html)
* html+css/10.html [手动实现虚拟DOM](https://gitee.com/qxscj/js-demo/blob/master/html+css/10.html)
* html+css/12.html [自动头部锁定](https://gitee.com/qxscj/js-demo/blob/master/html+css/12.html)
* html+css/13.html [拼图游戏](https://gitee.com/qxscj/js-demo/blob/master/html+css/13.html)
* html+css/16.html [可定制excel导出](https://gitee.com/qxscj/js-demo/blob/master/html+css/16.html)
* html+css/19.html [红包雨](https://gitee.com/qxscj/js-demo/blob/master/html+css/19.html)
* html+css/20.html [转盘效果1](https://gitee.com/qxscj/js-demo/blob/master/html+css/20.html)
* html+css/20-1.html [转盘效果2](https://gitee.com/qxscj/js-demo/blob/master/html+css/20-1.html)
* html+css/21.html [羊了个羊](https://gitee.com/qxscj/js-demo/blob/master/html+css/21.html)
* html+css/22.html [刮刮乐](https://gitee.com/qxscj/js-demo/blob/master/html+css/22.html)
* html+css/24.html [图片合并](https://gitee.com/qxscj/js-demo/blob/master/html+css/24.html)
* html+css/26.html [扫雷小游戏](https://gitee.com/qxscj/js-demo/blob/master/html+css/26.html)
* html+css/27.html [批量下载图片](https://gitee.com/qxscj/js-demo/blob/master/html+css/27.html)
* html+css/28.html [迷宫](https://gitee.com/qxscj/js-demo/blob/master/html+css/28.html)
* html+css/29.html [图片位置拖拽](https://gitee.com/qxscj/js-demo/blob/master/html+css/29.html)
* html+css/30.html [canvas绘图重播动画](https://gitee.com/qxscj/js-demo/blob/master/html+css/30.html)
* html+css/31-1.html [消消乐 ](https://gitee.com/qxscj/js-demo/blob/master/html+css/31-1.html)
* html+css/32.html [canvas粒子文字特效](https://gitee.com/qxscj/js-demo/blob/master/html+css/32.html)
* html+css/32-1.html [雪夜背景效果](https://gitee.com/qxscj/js-demo/blob/master/html+css/32-1.html)
* html+css/33.html [手写canvas图表](https://gitee.com/qxscj/js-demo/blob/master/html+css/33.html)
* html+css/34.html [钟摆游戏](https://gitee.com/qxscj/js-demo/blob/master/html+css/34.html)
* html+css/35.html [代码背景墙特效](https://gitee.com/qxscj/js-demo/blob/master/html+css/35.html)
* html+css/36.html [着色器](https://gitee.com/qxscj/js-demo/blob/master/html+css/36.html)
* html+css/37.html [摄像头拍照](https://gitee.com/qxscj/js-demo/blob/master/html+css/37.html)
* html+css/37-1.html [摄像头拍登记照（可切换底色）](https://gitee.com/qxscj/js-demo/blob/master/html+css/37-1.html)
* html+css/38.html [摄像头录制](https://gitee.com/qxscj/js-demo/blob/master/html+css/38.html)
* html+css/38-1.html [音频录制](https://gitee.com/qxscj/js-demo/blob/master/html+css/38-1.html)
* html+css/39.html [手电筒效果](https://gitee.com/qxscj/js-demo/blob/master/html+css/39.html)
* html+css/40.html [canvas撤销与恢复](https://gitee.com/qxscj/js-demo/blob/master/html+css/40.html)
* html+css/41.html [汉字找不同小游戏](https://gitee.com/qxscj/js-demo/blob/master/html+css/41.html)
* html+css/42.html [postMessage sdk封装](https://gitee.com/qxscj/js-demo/blob/master/html+css/42.html)
* html+css/43.html [9宫格翻牌抽奖](https://gitee.com/qxscj/js-demo/blob/master/html+css/43.html)
* html+css/44.html [emojo](https://gitee.com/qxscj/js-demo/blob/master/html+css/44.html)
* html+css/45.html [图片base64转file](https://gitee.com/qxscj/js-demo/blob/master/html+css/45.html)
* html+css/46.html [bugua](https://gitee.com/qxscj/js-demo/blob/master/html+css/46.html)
* html+css/47.html [表白爱心](https://gitee.com/qxscj/js-demo/blob/master/html+css/47.html)
* html+css/48.html [头列锁定](https://gitee.com/qxscj/js-demo/blob/master/html+css/48.html)
* html+css/51.html [pdf预览](https://gitee.com/qxscj/js-demo/blob/master/html+css/51.html)
* html+css/49.html [canvas像素操作](https://gitee.com/qxscj/js-demo/blob/master/html+css/49.html)
* html+css/5-1.html [canvas手写签名图片方向调整](https://gitee.com/qxscj/js-demo/blob/master/html+css/5-1.html)
* html+css/52.html [文件的切割与合并](https://gitee.com/qxscj/js-demo/blob/master/html+css/52.html)
* shader/shader-demo.html [着色器入门介绍（一）](https://gitee.com/qxscj/js-demo/blob/master/shader/shader-demo.html)
* shader/shader1.html [着色器入门介绍（二）](https://gitee.com/qxscj/js-demo/blob/master/shader/shader1.html)
* html+css/53.html [canvas图片裁剪](https://gitee.com/qxscj/js-demo/blob/master/html+css/53.html)
* html+css/55.html [无规则剪贴](https://gitee.com/qxscj/js-demo/blob/master/html+css/55.html)
* html+css/56.html [复制功能](https://gitee.com/qxscj/js-demo/blob/master/html+css/56.html)
* html+css/57.html [粘贴功能](https://gitee.com/qxscj/js-demo/blob/master/html+css/57.html)
* html+css/58.html [js制作gif](https://gitee.com/qxscj/js-demo/blob/master/html+css/58.html)
* html+css/59.html [IntersectionObserver](https://gitee.com/qxscj/js-demo/blob/master/html+css/59.html)
* html+css/61.html [暗色主题](https://gitee.com/qxscj/js-demo/blob/master/html+css/61.html)
* html+css/60.html [显示跨域图片](https://gitee.com/qxscj/js-demo/blob/master/html+css/60.html)
* html+css/62.html [js屏幕录制](https://gitee.com/qxscj/js-demo/blob/master/html+css/62.html)
* html+css/63.html [js声音控制](https://gitee.com/qxscj/js-demo/blob/master/html+css/63.html)
* html+css/65.html [重写setTimeout 和 setInterval](https://gitee.com/qxscj/js-demo/blob/master/html+css/65.html)
* html+css/66.html [底部footer自动适配位置](https://gitee.com/qxscj/js-demo/blob/master/html+css/66.html)