前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >英之试炼——第一境通达人与物之境(初阶试炼)

英之试炼——第一境通达人与物之境(初阶试炼)

作者头像
命运之光
发布2024-03-20 11:25:02
790
发布2024-03-20 11:25:02
举报

🌟博主:命运之光 ☀️专栏:英之剑法🗡 ❤️‍🔥专栏:英之试炼🔥

🐳 开篇想说的话:这里是英之试炼,想必大家都是看了英之剑法后来这里进行自我检测的,写这个英之试炼的时候我本身是很无奈的,这还要从我妈她给我说你现在已经上大学了,就不用我给你听写英语单词了吧?所以为了能自己听写单词,英之试炼简陋版就被我花三个小时敲出来了(●'◡'●)效果嘎嘎好,大家放心用,最好是在电脑上进行练习,手机上也行但是体验感不是很好,懂得都懂嗯~ o(* ̄▽ ̄*)o

❤️‍🔥英之试炼

🤺英之试炼代码的使用方法(超简单什么都不用下载)
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件(大功告成(●'◡'●)
❤️‍🔥英之试炼——第一境通达人与物之境(初阶)源代码
代码语言:javascript
复制
<!DOCTYPE html>
<!-- saved from url=(0098)file:///D:/%E6%A1%8C%E9%9D%A2/%E6%96%B0%E5%BB%BA%20%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3%20(5).html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>☀️命运之光要开始认真学习英语啦🐳</title>
  <link rel="stylesheet" href="file:///D:/%E6%A1%8C%E9%9D%A2/styles.css">
</head>
<body>
  <header>
    <h1>☀️英之剑法第一境——通达人与物之境🐳</h1>

    <section id="statistics">
      <div id="practice-count">目前为止总共练习次数:64</div>
      <p id="correct-answers">目前为止答对单词数量:9</p>
      <p id="wrong-answers">目前为止答错单词数量:54</p>
    </section>

    <section id="wrong-words-section">
      <h5>错误的单词</h5>
      <ul id="wrong-words-list"></ul>
    </section>

    <h4 id="countdown">距离下次英语四级考试还剩 9 天 1 小时 56 分 56 秒</h4>
  </header>

  <main>
    <div class="word-display">
      <section id="word-display" class="card">
        <h2 id="word">apple</h2>
        <p id="definition">苹果</p>
        <p id="example">I ate an apple.</p>
        <audio id="audio" src="audio/apple.mp3"></audio>
      </section>

      <section id="controls">
        <button id="previous-btn">上一个</button>
        <button id="pronunciation-btn">发音</button>
        <button id="next-btn">下一个</button>
        <button id="start-writing-btn">开始默写</button>
      </section>
    </div>

    <section id="quiz" class="card">
      <h2>单词测验</h2>
      <div id="question"></div>
      <input type="text" id="answer-input">
      <button id="check-answer-btn">检查答案</button>
      <button id="view-wrong-words-btn">查看错误的单词</button>
      <p id="result"></p>
      <p id="wrong-words"></p>
    </section>
  </main>

  <script src="file:///D:/%E6%A1%8C%E9%9D%A2/script.js"></script>




  <style>
body {
  font-family: Arial, sans-serif;
  background-color: #01bdff;
}

#wrong-words-section {
  position: absolute;
margin-top: 10px;
  top: 20px;
  left: 20px;
  width: 100px; /* 设置错误单词区域的宽度 */
}

#wrong-words-list {

  margin-top: 10px;
  padding-left: 3px;
  background-color: #f8f8f8; /* 设置错误单词区域的背景色 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {
  flex: 1;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

header {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  margin: 0;
  color: #f00;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

#word-display {
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  color: #333;
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  color: #666;
  font-size: 18px;
  margin-bottom: 10px;
}

audio {
  margin-top: 20px;
}

/* 其他样式... */


    #word-display {
      text-align: center;
      margin-bottom: 20px;
    }

    #controls {
      text-align: center;
      margin-bottom: 20px;
    }

    #quiz {
      text-align: center;
    }

    #question {
      font-weight: bold;
      margin-bottom: 10px;
    }

    #answer-input {
      margin-bottom: 10px;
    }

    #result {
      font-weight: bold;
    }

    button {
      padding: 10px 20px;
      margin: 0 5px;
    }

    input, button {
      font-size: 16px;
    }

    .hidden {
      visibility: hidden;
    }

    #statistics {
      position: absolute;
      top: 20px;
      right: 20px;
      text-align: right;
    }

    #statistics p {
      margin: 5px 0;
    }

    #wrong-words-section {
      position: absolute;
      top: 2px;
      left: 20px;
    }

    #wrong-words-list {
      margin-top: 5px;
      padding-left: 10px;
    }

    .card-container {
      display: flex;
    }

    #word-display {
      flex: 1;
   
    }

    #wrong-words-section {
      flex: 1;
    }

    #wrong-words-section .card {
      margin-bottom: 0;
    }

    #wrong-words-section h5 {
      margin-bottom: 10px;
    }

    #wrong-words-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    #wrong-words-list li {
      margin-bottom: 5px;
      padding: 5px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }



  </style>

  <script>
// 单词数据
const words = [
  { word: "apple", definition: "苹果", example: "I ate an apple.", audio: "audio/apple.mp3" },
  { word: "book", definition: "书", example: "I love reading books.", audio: "audio/book.mp3" },
  { word: "car", definition: "汽车", example: "She drives a car.", audio: "audio/car.mp3" },
{ word: "define", definition: "动词:给...下定义;解释", audio: "audio/car.mp3" },
{ word: "definition", definition: "名词:定义;清晰度", audio: "audio/car.mp3" },
{ word: "identify", definition: "动词:确认;辨认", audio: "audio/car.mp3" },
{ word: "identifiable", definition: "形容词:可识别的;可辨别的", audio: "audio/car.mp3" },
{ word: "identity", definition: "名词:身份;特性", audio: "audio/car.mp3" },
{ word: "determine", definition: "动词:决定;决心;查明", audio: "audio/car.mp3" },
{ word: "determinism", definition: "名词:决定论", audio: "audio/car.mp3" },
{ word: "judge", definition: "名词:法官;裁判		~动词:评判;估计", audio: "audio/car.mp3" },
{ word: "behavior", definition: "名词:行为;表现", audio: "audio/car.mp3" },
{ word: "behavioral", definition: "形容词:行为方面的", audio: "audio/car.mp3" },
{ word: "conduct", definition: "动词:组织并实施;主导	~名词:举止;实施方式", audio: "audio/car.mp3" },
{ word: "manner", definition: "名词:方式;举止", audio: "audio/car.mp3" },
{ word: "performance", definition: "名词:表演;表现", audio: "audio/car.mp3" },
{ word: "demand", definition: "动词:要求;需要		~名词:要求;需求", audio: "audio/car.mp3" },
{ word: "require", definition: "动词:需要;需求", audio: "audio/car.mp3" },
{ word: "claim", definition: "动词:声称;索取		~名词:声称;索赔", audio: "audio/car.mp3" },
{ word: "acclaim", definition: "动词:热烈称赞		~名词:赞扬", audio: "audio/car.mp3" },
{ word: "claimant", definition: "名词:索取人", audio: "audio/car.mp3" },
{ word: "command", definition: "动词:命令;博得		~名词:命令;掌握;指令", audio: "audio/car.mp3" },
{ word: "assert", definition: "动词:(坚决)主张;断言", audio: "audio/car.mp3" },
{ word: "request", definition: "名词:要求;请求		~动词:要求;请求", audio: "audio/car.mp3" },
{ word: "affirm", definition: "动词:证实;公开肯定", audio: "audio/car.mp3" },
{ word: "allegation", definition: "名词:(无证据的)指控", audio: "audio/car.mp3" },
{ word: "ignore", definition: "动词:忽视;不理睬", audio: "audio/car.mp3" },
{ word: "ignorant", definition: "形容词:无知的;愚昧的;不知道的", audio: "audio/car.mp3" },
{ word: "neglect", definition: "动词:忽视;疏忽		~名词:疏于照管", audio: "audio/car.mp3" },
{ word: "overlook", definition: "动词:俯视;忽略", audio: "audio/car.mp3" },
{ word: "own", definition: "形容词:自己的		~动词:拥有", audio: "audio/car.mp3" },
{ word: "ownership", definition: "名词:所有权", audio: "audio/car.mp3" },
{ word: "property", definition: "名词:财产;特性", audio: "audio/car.mp3" },
{ word: "monopoly", definition: "名词:垄断", audio: "audio/car.mp3" },
{ word: "possession", definition: "名词:拥有;财产", audio: "audio/car.mp3" },
{ word: "occupy", definition: "动词:占据;占用", audio: "audio/car.mp3" },
{ word: "state", definition: "名词:国家;州;状态	~动词:说明;陈述", audio: "audio/car.mp3" },
{ word: "statement", definition: "名词:声明;陈述", audio: "audio/car.mp3" },
{ word: "statesman", definition: "名词:政治家", audio: "audio/car.mp3" },
{ word: "understatement", definition: "名词:保守的说法;轻描淡写", audio: "audio/car.mp3" },
{ word: "illustrate", definition: "动词:(举例)阐明;表明", audio: "audio/car.mp3" },
{ word: "specific", definition: "形容词:确切的;特定的", audio: "audio/car.mp3" },
{ word: "specify", definition: "动词:详述;具体指明", audio: "audio/car.mp3" },
{ word: "detail", definition: "名词:细节;详细		~动词:详细说明", audio: "audio/car.mp3" },
{ word: "explanation", definition: "名词:解释;原因", audio: "audio/car.mp3" },
{ word: "interpretation", definition: "名词:解释;口译", audio: "audio/car.mp3" },
{ word: "interpret", definition: "动词:解释;口译", audio: "audio/car.mp3" },
{ word: "misinterpretation", definition: "名词:曲解;误解", audio: "audio/car.mp3" },
{ word: "exemplify", definition: "动词:举例说明;是......的典型", audio: "audio/car.mp3" },
{ word: "outline", definition: "名词:纲要;轮廓		~动词:概述", audio: "audio/car.mp3" },
{ word: "view", definition: "名词:观点;看法;颜色	~动词:看;看待", audio: "audio/car.mp3" },
{ word: "observe", definition: "动词:观察;注意到", audio: "audio/car.mp3" },
{ word: "observation", definition: "名词:观察;评论", audio: "audio/car.mp3" },
{ word: "witness", definition: "动词:见证;目击		~名词:证人;目击者", audio: "audio/car.mp3" },
{ word: "glance", definition: "名词:一瞥;扫视		~动词:瞥一眼", audio: "audio/car.mp3" },
{ word: "glimpse", definition: "名词:一瞥			~动词:瞥见", audio: "audio/car.mp3" },
{ word: "suggest", definition: "动词:表明;暗示;建议;认为", audio: "audio/car.mp3" },
{ word: "suggestion", definition: "名词:建议;暗示", audio: "audio/car.mp3" },
{ word: "refer", definition: "动词:谈及;指的是", audio: "audio/car.mp3" },
{ word: "reference", definition: "名词:参考;提及", audio: "audio/car.mp3" },
{ word: "mention", definition: "动词:提到;说到", audio: "audio/car.mp3" },
{ word: "advocate", definition: "名词:提倡者;拥护者	~动词:提倡;主张", audio: "audio/car.mp3" },
{ word: "propose", definition: "动词:提出;打算", audio: "audio/car.mp3" },
{ word: "proposal", definition: "名词:提议;建议", audio: "audio/car.mp3" },
{ word: "urge", definition: "名词:强烈欲望		~动词:敦促;鼓动", audio: "audio/car.mp3" },
{ word: "lobby", definition: "动词:游说			~名词:游说;大厅", audio: "audio/car.mp3" },
{ word: "recommend", definition: "动词:建议;推荐", audio: "audio/car.mp3" },
{ word: "recommendation", definition: "名词:推荐;建议", audio: "audio/car.mp3" },
{ word: "convincing", definition: "形容词:有说服力的", audio: "audio/car.mp3" },
{ word: "convince", definition: "动词:说服;使确信", audio: "audio/car.mp3" },
{ word: "persuade", definition: "动词:说服;劝说", audio: "audio/car.mp3" },
{ word: "persuasive", definition: "形容词:咨询的;顾问的", audio: "audio/car.mp3" },
{ word: "announce", definition: "动词:宣布;宣称", audio: "audio/car.mp3" },
{ word: "announcement", definition: "名词:通告;宣告", audio: "audio/car.mp3" },
{ word: "publish", definition: "动词:发布;宣告", audio: "audio/car.mp3" },
{ word: "publication", definition: "名词:出版;公开", audio: "audio/car.mp3" },
{ word: "publicity", definition: "名词:宣传;公众的关注", audio: "audio/car.mp3" },
{ word: "publicize", definition: "动词:宣传;公布", audio: "audio/car.mp3" },
{ word: "release", definition: "动词:释放;发布		~名词:释放;发布", audio: "audio/car.mp3" },
{ word: "advertisement", definition: "名词:广告", audio: "audio/car.mp3" },
{ word: "advertising", definition: "名词:广告(业);做广告", audio: "audio/car.mp3" },
{ word: "advertiser", definition: "名词:登广告者", audio: "audio/car.mp3" },
{ word: "declaration", definition: "名词:宣称;宣言", audio: "audio/car.mp3" },
{ word: "deal", definition: "名词:交易;协议;数量	~动词:处理(deal with)", audio: "audio/car.mp3" },
{ word: "approach", definition: "名词:方法;方式		~动词:处理;对付;接近;要求", audio: "audio/car.mp3" },
{ word: "executive", definition: "名词:管理人员;领导层	~形容词:行政的;决策的", audio: "audio/car.mp3" },
{ word: "solution", definition: "名词:解决办法", audio: "audio/car.mp3" },
{ word: "handle", definition: "动词:处理;应付", audio: "audio/car.mp3" },
{ word: "administration", definition: "名词:管理;行政", audio: "audio/car.mp3" },
{ word: "regulation", definition: "名词:规则;管制", audio: "audio/car.mp3" },
{ word: "regulator", definition: "名词:监管机构;调节器", audio: "audio/car.mp3" },
{ word: "regulate", definition: "动词:控制;调节", audio: "audio/car.mp3" },
{ word: "arrange", definition: "动词:安排;筹划", audio: "audio/car.mp3" },
{ word: "supervise", definition: "动词:监督;管理", audio: "audio/car.mp3" },
{ word: "supervision", definition: "名词:监督;管理", audio: "audio/car.mp3" },
{ word: "surveillance", definition: "名词:监视", audio: "audio/car.mp3" },
{ word: "cope", definition: "动词:应付;处理", audio: "audio/car.mp3" },
{ word: "tackle", definition: "动词:处理;对付", audio: "audio/car.mp3" },
{ word: "resolve", definition: "动词:解决;决心		~名词:决心", audio: "audio/car.mp3" },
{ word: "monitor", definition: "动词:监控;监听		~名词:显示屏;监控器", audio: "audio/car.mp3" },
{ word: "consider", definition: "动词:考虑;思考;认为", audio: "audio/car.mp3" },
{ word: "consideration", definition: "名词:考虑;体谅", audio: "audio/car.mp3" },
{ word: "reflect", definition: "动词:反应;显示;反射", audio: "audio/car.mp3" },
{ word: "conceive", definition: "动词:构想;想象;怀孕", audio: "audio/car.mp3" },
{ word: "deduce", definition: "动词:推断;演绎", audio: "audio/car.mp3" },
{ word: "ponder", definition: "动词:仔细考虑", audio: "audio/car.mp3" },
{ word: "admit", definition: "动词:承认;允许进入", audio: "audio/car.mp3" },
{ word: "recognize", definition: "动词:认出;承认;意识到", audio: "audio/car.mp3" },
{ word: "recognition", definition: "名词:识别;承认;认可", audio: "audio/car.mp3" },
{ word: "acknowledge", definition: "动词:承认;认可", audio: "audio/car.mp3" },
{ word: "produce", definition: "动词:制造;产生", audio: "audio/car.mp3" },
{ word: "productivity", definition: "名词:生产力;生产率", audio: "audio/car.mp3" },
{ word: "generate", definition: "动词:产生;引起", audio: "audio/car.mp3" },
{ word: "generative", definition: "形容词:生成的;有生产能力的", audio: "audio/car.mp3" },
{ word: "output", definition: "名词:产量;输出信息", audio: "audio/car.mp3" },
{ word: "yield", definition: "动词:生产;获利;屈服	~名词:产量;利益", audio: "audio/car.mp3" },
{ word: "manufacture", definition: "动词:生产;捏造		~名词:生产", audio: "audio/car.mp3" },
{ word: "manufacturer", definition: "名词:制造商", audio: "audio/car.mp3" },
{ word: "sense", definition: "名词:感觉;意义		~动词:感觉到", audio: "audio/car.mp3" },
{ word: "sensory", definition: "形容词:感觉的;感官的", audio: "audio/car.mp3" },
{ word: "perceive", definition: "动词:意识到;认为", audio: "audio/car.mp3" },
{ word: "conscious", definition: "形容词:意识到的;有知觉的", audio: "audio/car.mp3" },
{ word: "consciousness", definition: "名词:意识;知觉", audio: "audio/car.mp3" },
{ word: "subconscious", definition: "形容词:潜意识的		~名词:潜意识", audio: "audio/car.mp3" },
{ word: "detect", definition: "动词:察觉;发现", audio: "audio/car.mp3" },
{ word: "detector", definition: "名词:探测器", audio: "audio/car.mp3" },
{ word: "cognitive", definition: "形容词:认知的;认识的", audio: "audio/car.mp3" },
{ word: "comprehension", definition: "名词:理解(力)", audio: "audio/car.mp3" },
{ word: "predict", definition: "动词:预言;预测", audio: "audio/car.mp3" },
{ word: "prediction", definition: "名词:预测;预言", audio: "audio/car.mp3" },
{ word: "unpredictability", definition: "名词:不可预见性", audio: "audio/car.mp3" },
{ word: "forecast", definition: "动词:语言			~名词:预报", audio: "audio/car.mp3" },
{ word: "foreseeable", definition: "形容词:可预知的", audio: "audio/car.mp3" },
{ word: "create", definition: "动词:创造;创作", audio: "audio/car.mp3" },
{ word: "innovation", definition: "名词:创新;改革", audio: "audio/car.mp3" },
{ word: "innovative", definition: "形容词:革新的;富有创新精神的", audio: "audio/car.mp3" },
{ word: "formulate", definition: "动词:确切表达;构想出", audio: "audio/car.mp3" },
{ word: "formulation", definition: "名词:表述方式;制定", audio: "audio/car.mp3" },
{ word: "invent", definition: "动词:发明;创造", audio: "audio/car.mp3" },
{ word: "novelty", definition: "名词:新奇(的事物)", audio: "audio/car.mp3" },
{ word: "promote", definition: "动词:促进;推广", audio: "audio/car.mp3" },
{ word: "further", definition: "形容词:更进一步的		~副词:更进一步地", audio: "audio/car.mp3" },
{ word: "contribute", definition: "动词:贡献;捐款", audio: "audio/car.mp3" },
{ word: "contributory", definition: "形容词:起促进作用的", audio: "audio/car.mp3" },
{ word: "advance", definition: "名词:进步;发展		~动词:前进;促进;提前	~形容词:预先的;事先的", audio: "audio/car.mp3" },
{ word: "advanced", definition: "形容词:先进的;发达的;高阶的", audio: "audio/car.mp3" },
{ word: "boost", definition: "动词:提高;促进		~名词:提高", audio: "audio/car.mp3" },
{ word: "motivate", definition: "动词:成为......的动机;激励", audio: "audio/car.mp3" },
{ word: "motion", definition: "名词:运动;动作;提议", audio: "audio/car.mp3" },
{ word: "motive", definition: "名词:动机;目的", audio: "audio/car.mp3" },
{ word: "assist", definition: "动词:帮助,援助", audio: "audio/car.mp3" },
{ word: "motor", definition: "名词:马达;发动机", audio: "audio/car.mp3" },
{ word: "propel", definition: "动词:推进;驱使", audio: "audio/car.mp3" },
{ word: "criticize", definition: "动词:批评;责备", audio: "audio/car.mp3" },
{ word: "criticism", definition: "名词:批评;评论", audio: "audio/car.mp3" },
{ word: "critic", definition: "名词:评论家;批评者", audio: "audio/car.mp3" },
{ word: "critique", definition: "名词:评论(文章)", audio: "audio/car.mp3" },
{ word: "blame", definition: "动词:责怪;归咎于		~名词:责备;责任", audio: "audio/car.mp3" },
{ word: "condemn", definition: "动词:谴责;判刑", audio: "audio/car.mp3" },
{ word: "found", definition: "动词:建立;创建", audio: "audio/car.mp3" },
{ word: "establish", definition: "动词:建立;确立;证实", audio: "audio/car.mp3" },
{ word: "established", definition: "形容词:老牌的;资深的", audio: "audio/car.mp3" },
{ word: "establishment", definition: "名词:建立;机构", audio: "audio/car.mp3" },
{ word: "construct", definition: "动词:建造;构建", audio: "audio/car.mp3" },
{ word: "provide", definition: "动词:提供;供应", audio: "audio/car.mp3" },
{ word: "supply", definition: "名词:供应;补给	 	~动词:供应", audio: "audio/car.mp3" },
{ word: "cater", definition: "动词:迎合;(为社交活动)提供饮食", audio: "audio/car.mp3" },
{ word: "equip", definition: "动词:装备;配备", audio: "audio/car.mp3" },
{ word: "render", definition: "动词:使成为;使变得", audio: "audio/car.mp3" },
{ word: "provision", definition: "名词:规定;供给", audio: "audio/car.mp3" },
  // 添加更多单词...
];

    let currentIndex = 0;
    let isWritingMode = false;
    let correctAnswers = 0;
    let wrongAnswers = 0;
    let wrongWords = [];

    // 更新单词显示
    function updateWordDisplay() {
      const wordElement = document.getElementById("word");
      const definitionElement = document.getElementById("definition");
      const exampleElement = document.getElementById("example");
      const audioElement = document.getElementById("audio");

      const currentWord = words[currentIndex];
      wordElement.textContent = currentWord.word;
      definitionElement.textContent = currentWord.definition;
      exampleElement.textContent = currentWord.example;
      audioElement.src = currentWord.audio;

      if (isWritingMode) {
        wordElement.classList.add("hidden");
      } else {
        wordElement.classList.remove("hidden");
      }
    }

    // 上一个单词
    document.getElementById("previous-btn").addEventListener("click", function() {
      if (currentIndex > 0) {
        currentIndex--;
        updateWordDisplay();
      }
    });

    // 下一个单词
    document.getElementById("next-btn").addEventListener("click", function() {
      if (currentIndex < words.length - 1) {
        currentIndex++;
        updateWordDisplay();
      }
    });

    // 创建语音合成实例
    const speechSynthesis = window.speechSynthesis;

    // 发音按钮点击事件处理函数
    document.getElementById("pronunciation-btn").addEventListener("click", function() {
      const currentWord = words[currentIndex];
      const utterance = new SpeechSynthesisUtterance(currentWord.word);
      speechSynthesis.speak(utterance);
    });

    // 开始默写按钮点击事件处理函数
    document.getElementById("start-writing-btn").addEventListener("click", function() {
      isWritingMode = !isWritingMode;
      updateWordDisplay();
    });

    // 获取练习次数
    function getPracticeCount() {
      const practiceCount = localStorage.getItem("practiceCount");
      if (practiceCount) {
        return parseInt(practiceCount);
      } else {
        return 0;
      }
    }

    // 更新练习次数显示
    function updatePracticeCountDisplay() {
      const practiceCountElement = document.getElementById("practice-count");
      const practiceCount = getPracticeCount();
      practiceCountElement.textContent = `目前为止总共练习次数:${practiceCount}`;
    }

    // 增加练习次数
    function incrementPracticeCount() {
      const practiceCount = getPracticeCount() + 1;
      localStorage.setItem("practiceCount", practiceCount);
    }

    // 获取答对次数
    function getCorrectCount() {
      const correctCount = localStorage.getItem("correctCount");
      if (correctCount) {
        return parseInt(correctCount);
      } else {
        return 0;
      }
    }

    // 更新答对次数显示
    function updateCorrectCountDisplay() {
      const correctCountElement = document.getElementById("correct-answers");
      const correctCount = getCorrectCount();
      correctCountElement.textContent = `目前为止答对单词数量:${correctCount}`;
    }

    // 增加答对次数
    function incrementCorrectCount() {
      const correctCount = getCorrectCount() + 1;
      localStorage.setItem("correctCount", correctCount);
    }

    // 获取答错次数
    function getWrongCount() {
      const wrongCount = localStorage.getItem("wrongCount");
      if (wrongCount) {
        return parseInt(wrongCount);
      } else {
        return 0;
      }
    }

    // 更新答错次数显示
    function updateWrongCountDisplay() {
      const wrongCountElement = document.getElementById("wrong-answers");
      const wrongCount = getWrongCount();
      wrongCountElement.textContent = `目前为止答错单词数量:${wrongCount}`;
    }

    // 增加答错次数
    function incrementWrongCount() {
      const wrongCount = getWrongCount() + 1;
      localStorage.setItem("wrongCount", wrongCount);
    }

    // 更新统计信息显示
    function updateStatisticsDisplay() {
      updatePracticeCountDisplay();
      updateCorrectCountDisplay();
      updateWrongCountDisplay();
    }

    // 检查答案按钮点击事件处理函数
    document.getElementById("check-answer-btn").addEventListener("click", function() {
      const answerInput = document.getElementById("answer-input");
      const answer = answerInput.value.trim().toLowerCase();
      const currentWord = words[currentIndex];

      if (answer === currentWord.word.toLowerCase()) {
        document.getElementById("result").textContent = "回答正确!";
        incrementCorrectCount();
        correctAnswers++;
      } else {
        document.getElementById("result").textContent = `回答错误!正确答案是:${currentWord.word}`;
        incrementWrongCount();
        wrongAnswers++;
        wrongWords.push(currentWord);
      }

      answerInput.value = "";
      answerInput.focus();
      updateStatisticsDisplay();
    });

    // 查看错误的单词按钮点击事件处理函数
    document.getElementById("view-wrong-words-btn").addEventListener("click", function() {
      const wrongWordsList = document.getElementById("wrong-words-list");
      wrongWordsList.innerHTML = "";

      wrongWords.forEach(function(word) {
        const li = document.createElement("li");
        li.textContent = `${word.word} - ${word.definition}`;
        wrongWordsList.appendChild(li);
      });
    });

    // 初始化应用
    function initializeApp() {
      updateWordDisplay();
      updateStatisticsDisplay();
      incrementPracticeCount();
    }

    // 调用初始化函数
    initializeApp();

// 更新倒计时
function updateCountdown() {
  // 定义考试日期和时间
  const examDate = new Date("2023-12-01T09:00:00Z");

  // 获取当前日期和时间
  const currentDate = new Date();

  // 计算距离考试的剩余时间
  const remainingTime = examDate - currentDate;

  // 计算剩余的天数、小时数、分钟数和秒数
  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  // 更新倒计时元素的内容
  const countdownElement = document.getElementById("countdown");
  countdownElement.textContent = `距离下次英语四级考试还剩 ${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
}

// 在页面加载完成后调用updateCountdown函数来初始化倒计时
window.addEventListener("load", function() {
  updateCountdown();

  // 每秒钟更新一次倒计时
  setInterval(updateCountdown, 1000);
});


  </script>


</body></html>

🌸 结语

大家一定要掌握完所有单词后再观看下一篇哦,努力加油,命运之光( •̀ ω •́ )y冲冲冲

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ❤️‍🔥英之试炼
    • 🤺英之试炼代码的使用方法(超简单什么都不用下载)
      • 🍓1.打开记事本
      • 🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
    • 🍓3.打开html文件(大功告成(●'◡'●)
      • ❤️‍🔥英之试炼——第一境通达人与物之境(初阶)源代码
      • 🌸 结语
      相关产品与服务
      语音合成
      语音合成(Text To Speech,TTS)满足将文本转化成拟人化语音的需求,打通人机交互闭环。提供多场景、多语言的音色选择,支持 SSML 标记语言,支持自定义音量、语速等参数,让发音更专业、更符合场景需求。语音合成广泛适用于智能客服、有声阅读、新闻播报、人机交互等业务场景。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档