英之试炼——第一境通达人与物之境（初阶试炼）
英之试炼——第一境通达人与物之境（初阶试炼）
命运之光
发布于 2024-03-20 11:25:02
发布于 2024-03-20 11:25:02
代码可运行
文章被收录于专栏：我在本科期间写的文章
运行总次数：0
代码可运行
🐳 开篇想说的话：这里是英之试炼，想必大家都是看了英之剑法后来这里进行自我检测的，写这个英之试炼的时候我本身是很无奈的，这还要从我妈她给我说你现在已经上大学了，就不用我给你听写英语单词了吧？所以为了能自己听写单词，英之试炼简陋版就被我花三个小时敲出来了(●'◡'●)效果嘎嘎好，大家放心用，最好是在电脑上进行练习，手机上也行但是体验感不是很好，懂得都懂嗯~ o(*￣▽￣*)o
❤️🔥英之试炼
🤺英之试炼代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)
❤️🔥英之试炼——第一境通达人与物之境（初阶）源代码
<!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 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
