MY_html_css_js

这是一个以 HTML、CSS 和 JavaScript 为核心的前端练习与实验仓库，主要用于展示各种小型网页应用、交互效果和学习案例。项目内容以“边做边学”为主，适合用于练习前端基础、DOM 操作、动画效果、表单交互和简单数据处理。

项目定位

这个仓库并不是一个传统意义上的“完整产品”，而是一组不断迭代的前端小作品集合。里面包含：

• 简单计算器
• SHA-256 哈希生成器
• 词汇记忆与背诵辅助工具
• 动画效果演示（如泡泡/小球物理效果）
• 五子棋游戏
• 多个版本的实验页面和改造样例

目录说明

• hash-SHA256/sha256.html
  一个基于原生 JavaScript 实现的 SHA-256 哈希生成器，支持输入文本后实时计算哈希值。

• paopao/paopao%20screen.html 和 paopao/paopao%20words.html
  两个基于 DOM 和动画逻辑实现的小球/泡泡效果页面，展示了简单的物理运动和界面交互。

• Simple Calculator/版本/index.html
  一个简洁的网页版计算器，支持基本四则运算和括号表达式。

• 五子棋/word.html
  一个较完整的网页五子棋游戏，包含棋盘绘制、轮流落子、胜负判断和重新开始/悔棋等功能。

• vocabulary_UPright/
  一组词汇学习相关页面，分别面向不同考试词汇（如 CET4、CET6、考研、SAT、TOEFL 等）进行展示和练习。

• WORDS_pages/
  这是仓库中最丰富的部分，包含多个版本的单词记忆工具页面，支持单词分类、导入/导出、保存进度、主题切换、键盘操作等功能。

主要功能

1. 计算器

• 支持基础运算
• 支持括号输入
• 支持清空、删除和结果计算

2. 哈希工具

• 输入任意文本
• 实时生成 SHA-256 哈希值
• 适合学习加密和字符串处理逻辑

3. 词汇学习工具

• 单词展示与记忆流程
• 已牢记 / 待巩固 / 复习区分栏
• 键盘快捷键操作
• 保存进度、导入导出词汇表
• 支持浅色/深色主题切换

4. 游戏与动画

• 五子棋对局体验
• 小球动画和碰撞效果
• 适合练习 Canvas、DOM 动画和事件驱动逻辑

运行方式

由于这是一个静态网页项目，通常不需要安装复杂依赖。

推荐使用本地静态服务器运行，避免某些文件访问或资源加载问题：

cd /workspaces/MY_html_css_js
python3 -m http.server 8000

然后在浏览器中访问：

http://localhost:8000/

你也可以直接双击某个 HTML 文件在浏览器中打开，但部分页面在直接打开时可能会受到本地资源加载限制的影响。

适合学习的点

如果你想继续深入这个项目，可以重点关注以下内容：

• 原生 JavaScript 的事件绑定与 DOM 操作
• CSS 布局与样式切换
• 本地存储（如 localStorage）
• 文件上传、下载与 JSON 数据处理
• Canvas 绘图与动画逻辑
• 前端状态管理的简单实现

说明

仓库中的很多目录都包含“版本”或“copy”命名的文件夹，这说明它是一个长期迭代和实验的集合。不同版本之间可能存在差异，部分文件是为了测试不同思路而保留的。

如果你希望，我也可以继续帮你把这个仓库进一步整理成：

• 更适合初学者阅读的版本
• 一个带导航页的总入口
• 按“项目分类”重新组织后的结构