单词卡片项目

纯前端本地手机端单词卡片背诵项目

功能特点

1. 卡片式展示：每个单词一张卡片，包含：

   • 第一行：单词
   • 三个搭配示例
   • 写作句
   • 口语句

2. 翻页导航：

   • 左上角显示 当前/总数 (如 1/20)
   • 右下角有上一个/下一个按钮
   • 支持左右滑动翻页
   • 支持键盘左右键翻页（PC测试用）

3. 全部单词弹窗：

   • 点击右上角"全部单词"从右侧弹出列表
   • 点击任意单词直接跳转
   • 绿色标记区分已背过/未背过的单词

4. 记忆功能：

   • 点击单词列表中勾选框切换是否已背
   • 当前卡片双击即可标记为已背/未背
   • 记忆状态保存在浏览器本地存储中，刷新不丢失

5. 可扩展导入：

   • 后期可以随时添加新单词
   • 新增单词可以通过JSON文件导入

使用说明

打开方式

直接用浏览器打开 index.html 即可使用，推荐在手机浏览器中打开，或发送到手机访问。

添加新单词方法

方法一：编辑 data.js 文件

直接在 vocabularyData 数组末尾追加新的单词，格式：

{
    "word": "单词",
    "phonetic": "音标（可选，比如 /əˈsjuːm/）",
    "definition": "单词释义（可选）",
    "collocations": ["搭配1", "搭配2", "搭配3"],
    "writing": "写作例句",
    "speaking": "口语例句"
}

方法二：通过JSON文件导入（浏览器控制台操作）

1. 将你的新单词保存为 new_words.json 文件，格式参照 new_words_sample.json
2. 在浏览器打开单词卡片页面
3. 打开开发者工具 → 控制台
4. 用以下代码导入：

// 先读取文件，例如：
fetch('new_words.json')
  .then(r => r.json())
  .then(data => window.importVocabFromFile(data));

或者如果你已经把JSON数据复制好了，直接：

window.importVocabFromFile([
    {
        "word": "你的新单词",
        "collocations": ["搭配1", "搭配2", "搭配3"],
        "writing": "写作句...",
        "speaking": "口语句..."
    },
    // ...更多单词
]);

说明：导入时会自动去重，已有的单词不会重复添加。

项目文件结构

vocab-cards/
├── index.html       # 主页面
├── style.css        # 样式
├── data.js          # 单词数据
├── app.js           # 功能逻辑
├── new_words_sample.json    # 新单词导入示例文件
└── README.md        # 说明文档

操作技巧

• 双击卡片：快速切换当前单词是否已背
• 左右滑动：手机上左右滑动翻页
• 绿色背景：表示已背过单词，在列表中清晰区分
• 记忆状态自动保存在本地，下次打开仍然保留