# H5.Examples **Repository Path**: LinYiSongEr/H5.Examples ## Basic Information - **Project Name**: H5.Examples - **Description**: 🎯H5示例文件100+，包含文字溢出省略号、字体渐变、雪碧图、flex布局、刮刮卡、WebSQL、翻牌游戏、五子棋、拖拽上传、贪吃蛇、推箱子、拖拽换位、大富翁、飞机大战、连连看、猜位置、2048、观察物体、大富翁幸福人生、举牌小人、数字滚动、二维码识别/生成、乌龟对对碰、扫雷等前端简单示例代码。 - **Primary Language**: HTML - **License**: MIT - **Default Branch**: main - **Homepage**: https://linyisonger.github.io/H5.Examples/ - **GVP Project**: No ## Statistics - **Stars**: 5 - **Forks**: 1 - **Created**: 2022-12-12 - **Last Updated**: 2025-04-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: HTML, CSS, JavaScript, 小游戏, 示例 ## README ## H5 示例代码 ![MIT](https://img.shields.io/github/license/linyisonger/H5.Examples?style=for-the-badge)![Stars](https://img.shields.io/github/stars/linyisonger/H5.Examples?style=for-the-badge) https://linyisonger.github.io/H5.Examples/ 可以直接打开链接即可 #### 已有功能 - [x] 预览效果 - [x] 查看源码 #### 示例截图 ##### [**文字溢出省略号**](https://linyisonger.github.io/H5.Examples/?name=./001.文字溢出省略号.html) ![](./assets/preview/001.png) ##### [**Table边框**](https://linyisonger.github.io/H5.Examples/?name=./002.Table边框.html) ![](./assets/preview/002.png) ##### [**滑块拼图验证**](https://linyisonger.github.io/H5.Examples/?name=./003.滑块拼图验证.html) ![](./assets/preview/003.png) ##### [**自定义滚动条**](https://linyisonger.github.io/H5.Examples/?name=./004.自定义滚动条.html) ![](./assets/preview/004.png) ##### [**获取浏览器品牌名称**](https://linyisonger.github.io/H5.Examples/?name=./005.获取浏览器品牌名称.html) ![](./assets/preview/005.png) ##### [**字体颜色渐变**](https://linyisonger.github.io/H5.Examples/?name=./006.字体颜色渐变.html) ![](./assets/preview/006.png) ##### [**复制文本到剪贴板**](https://linyisonger.github.io/H5.Examples/?name=./007.复制文本到剪贴板.html) ![](./assets/preview/007.png) ##### [**Flex布局的使用**](https://linyisonger.github.io/H5.Examples/?name=./008.Flex布局的使用.html) ![](./assets/preview/008.png) ##### [**元素居中的几种方式**](https://linyisonger.github.io/H5.Examples/?name=./009.元素居中的几种方式.html) ![](./assets/preview/009.png) ##### [**五子棋**](https://linyisonger.github.io/H5.Examples/?name=./010.五子棋.html) ![](./assets/preview/010.png) ##### [**拼图游戏**](https://linyisonger.github.io/H5.Examples/?name=./011.拼图游戏.html) ![](./assets/preview/011.png) ##### [**翻牌游戏**](https://linyisonger.github.io/H5.Examples/?name=./012.翻牌游戏.html) ![](./assets/preview/012.png) ##### [**图像旋转并保存**](https://linyisonger.github.io/H5.Examples/?name=./013.图像旋转并保存.html) ![](./assets/preview/013.png) ##### [**颜色转换**](https://linyisonger.github.io/H5.Examples/?name=./014.颜色转换.html) ![](./assets/preview/014.png) ##### [**吊线图**](https://linyisonger.github.io/H5.Examples/?name=./015.吊线图.html) ![](./assets/preview/015.png) ##### [**拖动文件上传**](https://linyisonger.github.io/H5.Examples/?name=./016.拖动文件上传.html) ![](./assets/preview/016.png) ##### [**瀑布流效果**](https://linyisonger.github.io/H5.Examples/?name=./017.瀑布流效果.html) ![](./assets/preview/017.png) ##### [**轮播图**](https://linyisonger.github.io/H5.Examples/?name=./018.轮播图.html) ![](./assets/preview/018.png) ##### [**翻牌效果**](https://linyisonger.github.io/H5.Examples/?name=./019.翻牌效果.html) ![](./assets/preview/019.png) ##### [**水滴动画**](https://linyisonger.github.io/H5.Examples/?name=./020.水滴动画.html) ![](./assets/preview/020.png) ##### [**调用摄镜头拍照**](https://linyisonger.github.io/H5.Examples/?name=./021.调用摄镜头拍照.html) ![](./assets/preview/021.png) ##### [**证书生成器**](https://linyisonger.github.io/H5.Examples/?name=./022.证书生成器.html) ![](./assets/preview/022.png) ##### [**Vue双向绑定实现**](https://linyisonger.github.io/H5.Examples/?name=./023.Vue双向绑定实现.html) ![](./assets/preview/023.png) ##### [**富文本编辑器**](https://linyisonger.github.io/H5.Examples/?name=./024.富文本编辑器.html) ![](./assets/preview/024.png) ##### [**画垂直线**](https://linyisonger.github.io/H5.Examples/?name=./025.画垂直线.html) ![](./assets/preview/025.png) ##### [**磁盘图**](https://linyisonger.github.io/H5.Examples/?name=./026.磁盘图.html) ![](./assets/preview/026.png) ##### [**时间线**](https://linyisonger.github.io/H5.Examples/?name=./027.时间线.html) ![](./assets/preview/027.png) ##### [**每日成语**](https://linyisonger.github.io/H5.Examples/?name=./028.每日成语.html) ![](./assets/preview/028.png) ##### [**导航栏**](https://linyisonger.github.io/H5.Examples/?name=./029.导航栏.html) ![](./assets/preview/029.png) ##### [**雪碧图 哆啦A梦**](https://linyisonger.github.io/H5.Examples/?name=./030.雪碧图%20哆啦A梦.html) ![](./assets/preview/030.png) ##### [**Table表格内容滑动**](https://linyisonger.github.io/H5.Examples/?name=./031.Table表格内容滑动.html) ![](./assets/preview/031.png) ##### [**元素交换位置 美食排行榜**](https://linyisonger.github.io/H5.Examples/?name=./032.元素交换位置%20美食排行榜.html) ![](./assets/preview/032.png) ##### [**刮刮卡**](https://linyisonger.github.io/H5.Examples/?name=./033.刮刮卡.html) ![](./assets/preview/033.png) ##### [**抽奖页面**](https://linyisonger.github.io/H5.Examples/?name=./034.抽奖页面.html) ![](./assets/preview/034.png) ##### [**推箱子之送行者**](https://linyisonger.github.io/H5.Examples/?name=./035.推箱子之送行者.html) ![](./assets/preview/035.png) ##### [**贪吃蛇**](https://linyisonger.github.io/H5.Examples/?name=./036.贪吃蛇.html) ![](./assets/preview/036.png) ##### [**文字左右对齐样式**](https://linyisonger.github.io/H5.Examples/?name=./037.文字左右对齐样式.html) ![](./assets/preview/037.png) ##### [**el-popover根据字符超出是否展示**](https://linyisonger.github.io/H5.Examples/?name=./038.el-popover根据字符超出是否展示.html) ![](./assets/preview/038.png) ##### [**书本翻页效果**](https://linyisonger.github.io/H5.Examples/?name=./039.书本翻页效果.html) ![](./assets/preview/039.png) ##### [**文字展开查看更多**](https://linyisonger.github.io/H5.Examples/?name=./040.文字展开查看更多.html) ![](./assets/preview/040.png) ##### [**Canvas奇幻之旅第一季**](https://linyisonger.github.io/H5.Examples/?name=./041.Canvas奇幻之旅第一季.html) ![](./assets/preview/041.png) ##### [**大富翁**](https://linyisonger.github.io/H5.Examples/?name=./042.大富翁.html) ![](./assets/preview/042.png) ##### [**图片拖拽另一个盒子中**](https://linyisonger.github.io/H5.Examples/?name=./043.图片拖拽另一个盒子中.html) ![](./assets/preview/043.png) ##### [**Canvas奇幻之旅第二季**](https://linyisonger.github.io/H5.Examples/?name=./044.Canvas奇幻之旅第二季.html) ![](./assets/preview/044.png) ##### [**监听盒子宽度发生变化**](https://linyisonger.github.io/H5.Examples/?name=./045.监听盒子宽度发生变化.html) ![](./assets/preview/045.png) ##### [**电视频道直播画面**](https://linyisonger.github.io/H5.Examples/?name=./046.电视频道直播画面.html) ![](./assets/preview/046.png) ##### [**连连看**](https://linyisonger.github.io/H5.Examples/?name=./047.连连看.html) ![](./assets/preview/047.png) ##### [**文件转Base64字符串**](https://linyisonger.github.io/H5.Examples/?name=./048.文件转Base64字符串.html) ![](./assets/preview/048.png) ##### [**3D旋转 名侦探柯南装备介绍**](https://linyisonger.github.io/H5.Examples/?name=./049.3D旋转%20名侦探柯南装备介绍.html) ![](./assets/preview/049.png) ##### [**Canvas遮罩绘制**](https://linyisonger.github.io/H5.Examples/?name=./050.Canvas遮罩绘制.html) ![](./assets/preview/050.png) ##### [**Canvas多边形绘制**](https://linyisonger.github.io/H5.Examples/?name=./051.Canvas多边形绘制.html) ![](./assets/preview/051.png) ##### [**Canvas绘制胶囊**](https://linyisonger.github.io/H5.Examples/?name=./052.Canvas绘制胶囊.html) ![](./assets/preview/052.png) ##### [**飞机大战**](https://linyisonger.github.io/H5.Examples/?name=./053.飞机大战.html) ![](./assets/preview/053.png) ##### [**浏览器多窗口堆叠特效**](https://linyisonger.github.io/H5.Examples/?name=./054.浏览器多窗口堆叠特效.html) ![](./assets/preview/054.png) ##### [**A星寻路**](https://linyisonger.github.io/H5.Examples/?name=./055.A星寻路.html) ![](./assets/preview/055.png) ##### [**Three 3D展馆**](https://linyisonger.github.io/H5.Examples/?name=./056.Three%203D展馆.html) ![](./assets/preview/056.png) ##### [**el-table 表格合并**](https://linyisonger.github.io/H5.Examples/?name=./057.el-table%20表格合并.html) ![](./assets/preview/057.png) ##### [**tesseract**](https://linyisonger.github.io/H5.Examples/?name=./058.tesseract.js%20图片转文字.html) ![](./assets/preview/058.png) ##### [**Canvas 签名**](https://linyisonger.github.io/H5.Examples/?name=./059.Canvas%20签名.html) ![](./assets/preview/059.png) ##### [**Canvas 手写单词识别**](https://linyisonger.github.io/H5.Examples/?name=./060.Canvas%20手写单词识别.html) ![](./assets/preview/060.png) ##### [**音乐播放器**](https://linyisonger.github.io/H5.Examples/?name=./061.音乐播放器.html) ![](./assets/preview/061.png) ##### [**百度地图 BMapGL点聚合**](https://linyisonger.github.io/H5.Examples/?name=./062.百度地图%20BMapGL点聚合.html) ![](./assets/preview/062.png) ##### [**年度总结 Animate**](https://linyisonger.github.io/H5.Examples/?name=./063.年度总结%20Animate.css.html) ![](./assets/preview/063.png) ##### [**2048**](https://linyisonger.github.io/H5.Examples/?name=./064.2048.html) ![](./assets/preview/064.png) ##### [**el-table 表格宽度拖拽**](https://linyisonger.github.io/H5.Examples/?name=./065.el-table%20表格宽度拖拽.html) ![](./assets/preview/065.png) ##### [**猜位置**](https://linyisonger.github.io/H5.Examples/?name=./066.猜位置.html) ![](./assets/preview/066.png) ##### [**粒子扩散效果**](https://linyisonger.github.io/H5.Examples/?name=./067.粒子扩散效果.html) ![](./assets/preview/067.png) ##### [**Canvas 盒子连线**](https://linyisonger.github.io/H5.Examples/?name=./068.Canvas%20盒子连线.html) ![](./assets/preview/068.png) ##### [**table 表格合并**](https://linyisonger.github.io/H5.Examples/?name=./069.table%20表格合并.html) ![](./assets/preview/069.png) ##### [**提取图片主题色**](https://linyisonger.github.io/H5.Examples/?name=./070.提取图片主题色.html) ![](./assets/preview/070.png) ##### [**el-input 限制只能输入数字**](https://linyisonger.github.io/H5.Examples/?name=./071.el-input%20限制只能输入数字.html) ![](./assets/preview/071.png) ##### [**Grid 布局练习**](https://linyisonger.github.io/H5.Examples/?name=./072.Grid%20布局练习.html) ![](./assets/preview/072.png) ##### [**Svg 半圆**](https://linyisonger.github.io/H5.Examples/?name=./073.Svg%20半圆.html) ![](./assets/preview/073.png) ##### [**echart 常见饼图**](https://linyisonger.github.io/H5.Examples/?name=./074.echart%20常见饼图.html) ![](./assets/preview/074.png) ##### [**Three**](https://linyisonger.github.io/H5.Examples/?name=./075.Three.js%20观察物体.html) ![](./assets/preview/075.png) ##### [**随机数据**](https://linyisonger.github.io/H5.Examples/?name=./076.随机数据.html) ![](./assets/preview/076.png) ##### [**3D卡片鼠标跟随旋转动效**](https://linyisonger.github.io/H5.Examples/?name=./077.3D卡片鼠标跟随旋转动效.html) ![](./assets/preview/077.png) ##### [**你更喜欢谁**](https://linyisonger.github.io/H5.Examples/?name=./078.你更喜欢谁.html) ![](./assets/preview/078.png) ##### [**Canvas 爆炸粒子效果**](https://linyisonger.github.io/H5.Examples/?name=./079.Canvas%20爆炸粒子效果.html) ![](./assets/preview/079.png) ##### [**Canvas 举牌小人**](https://linyisonger.github.io/H5.Examples/?name=./080.Canvas%20举牌小人.html) ![](./assets/preview/080.png) ### 开发 新建文件钩子文件 用于提交时更新**examples.txt**，从而更新列表以及预览图。 [.git/hooks/pre-commit](.git/hooks/pre-commit) ```shell #!/bin/sh # 复制文件进入文件夹 ls -R [0-9]*.html > examples.txt git add examples.txt ``` 新建示例文件 ```shell echo '' > "058.tesseract.js 文字识别.html" # 或者 python .\build\new.py 思绪万千 # 或者 new 思绪万千 ``` #### 示例截图 执行以下命令之前需要配置 - conda - vscode - Live Server - 目前我配置是6600端口，可根据自己端口进行修改index.py。 启用 Live Server 后再进行生成示例图片。 ```shell # 切换文件夹 cd build # 使用conda新建环境 conda create --name h5-build-310 python==3.10 # 切换环境 conda activate h5-build-310 # 安装依赖 pip install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/ # 生成截图，但是有些截图可能存在问题，将其删除重新执行python index.py即可 python index.py ``` #### 打包new命令行 ```shell # 切换环境 conda activate h5-build-310 # 安装依赖 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyinstaller # 打包命令 Pyinstaller -F ```