html：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>打字小游戏</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body onload="init()">
<div class="container" id="container">
<div class="header">
<div class="topBar"><span>欢迎来到日语学习站！</span></div>
<div class="nav">
<div><button id="navBtn1" type="button">单词学习</button></div>
<div><button id="navBtn2" type="button">单词复习</button></div>
<div><button id="navBtn3" type="button">单词测试</button></div>
<div><button id="navBtn3" type="button" onclick="showForm()">设置</button></div>
</div>
<div id="setForm">
<form>
<label for="dailyWordCount">单次学习量:</label>
<input type="number" id="learnNum" name="learnNum" min="10" max="200">
<label for="reviewWordCount">单次复习量:</label>
<input type="number" id="reviewNum" name="reviewNum" min="10" max="200">
<button type="button" onclick="setPlan()">确定</button>
</form>
</div>
</div>
<div class="toast" id="toast">提示框</div>
</div>
<div class="main">
<table>
<tr class="questionBar" >
<td><span id="num"></span></td>
<td><span id="ques"></span></td>
</tr>
<tr>
<td class="answerBar"><span>正确发音：</span></td>
<td> <div id="pronunceDiv">
<span id="pronunce"></span> <span id="pnum"></span>
</div></td>
</tr>
<tr>
<td><span>词性：</span></td>
<td><div><span id="pos"></span></div></td>
</tr>
<tr>
<td><span>释义：</span></td>
<td> <div><span id="meaning"></span></div></td>
</tr>
<tr >
<td><span>输入:</span></td>
<td > <div class="inputBar">
<input id="inputContent" type="text" placeholder="请输入读音:"/>
</div></td>
</tr>
</div>
</table>
<div class="footer">底部信息</div>
<script src="script.js" defer></script>
</body>
</html>```
css
```
button{
width:100%;
}
body {
display: flex;
border: 1px solid yellowgreen;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
.container {
display: flex;
border: 1px solid yellowgreen;
row-gap: 30px;
flex-direction: column;
}
.header {
display: flex;
border: 1px solid yellowgreen;
flex-direction: column;
justify-content: space-around;
flex-wrap: wrap;
row-gap: 30px;
margin: 50px auto 0px;
align-items: center;
min-width: 100px;
}
.nav{
display: flex;
flex-direction: row;
justify-content:space-around ;
min-width: 100px;
}
.nav button{
align-items: center;
column-gap: 30px;
}
.toast{
margin: auto;
background-color:lightcoral;
color:black;
padding:10px;
border-radius: 8px;
opacity: 0.5;
visibility:hidden;
}
.topBar{
align-self: center;
}
.main {
margin: 20px auto 0px;
display: flex;
row-gap: 30px;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
.answerBar {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.answerBar div {
align-self: center;
}
table{
display: block;
min-height: max-content;
}
#pronunceDiv {
display: flex;
text-align: center;
min-height: 20px;
}
td {
height: 35px
}
.main div{
min-width:400px;
}
.inputBar input{
padding-left: 5px;
width: 100%;
padding:5px 8px;
}
#ques{
margin: auto;
}
#pronunce{
color: black;
}
.footer{
align-self: center;
}
.setForm {
display:none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 5px;
/* 默认不显示 */
}
```
js
`
const questionContent=document.getElementById("ques");//题目
const questionNum=document.getElementById("num");//题目号
const pronunce=document.getElementById("pronunce");//发音
const pnum=document.getElementById("pnum");//音调号
const pos=document.getElementById("pos");//词性
const meaning=document.getElementById("meaning");//意思
const inputContent=document.getElementById("inputContent");//输入内容
const toast=document.getElementById("toast");//toast
const learnNumInput=document.getElementById("learnNum");
const reviewNumInput=document.getElementById("reviewNum");
const setForm=document.getElementById("setForm");
var learnNum=20;//默认一次学习20个单词
var reviewNum=20;//默认一次复习20个单词
function init(){
getDictionaryJson();
startTest();
}
function showForm(){
setForm.style.display="block";
}
function setPlan(){
learnNum=learnNumInput.value;
reviewNum=reviewNumInput.value;
console.log(learnNum "/n" reviewNum);
setForm.style.display="none";
}
function setToast(text){
toast.innerText=text;
toast.style.visibility="visible";
setTimeout(function(){
toast.style.visibility="hidden";
},1500);
}
//获得键盘输入内容
async function getInput(){
return new Promise((resolve) => {
document.addEventListener('keydown',(Event) =>{
if(Event.key === 'Enter'){
const inputValue = inputContent.value;
if(inputValue!=null ||inputValue!='')
resolve(inputValue);
else{
setToast("不能为空！")
return null;
}
}
})
})
}
//运行主函数
async function startTest(){
const wordList=getSomeShuffledWords(20);
var rightNum=0;
var wordNum=1;
for (var i=0;i<wordList.length;){
console.log(wordList[i]);
questionContent.innerText=wordList[i].kanji;
questionNum.innerText=wordNum '/' wordList.length;
const inputValue = await getInput();
if(inputValue!= null && inputValue!= ''){
pronunce.style.color="black";
if(inputValue===wordList[i].pronunce){
pronunce.innerText=wordList[i].pronunce;
toast.inner
pronunce.innerText='';
pnum.innerText='';
pos.innerText='';
meaning.innerText='';
inputContent.value='';
rightNum ;
wordNum ;
i ;
}
else{
pronunce.style.color="red";
pnum.innerText=wordList[i].num;
pos.innerText=wordList[i].pos;
meaning.innerText=wordList[i].meaning;
pronunce.innerText=wordList[i].pronunce;
setToast("答案错误！");
}
}
}
alert('正确个数:' rightNum);
}
//将文件转json存入localStorage
function getDictionaryJson() {
fetch('dictionary.txt')
.then(Response => Response.text())
.then(text => {
const regKanji = /^. ?(?=s)/;//匹配日文
const regProunce = /(?<=（). (?=）)/ //匹配发音
const regProunceNum = /.?(?=【)/ //匹配发音音调
const regMeaning = /(?<=】). ?(?=s)/; //匹配含义
const regPOS = /(?<=【). (?=】)/;//匹配词性 part of speech
let lines = text.split('n');
let wordList = [];
lines.forEach(line => {
let kanji = line.match(regKanji);
let pronunce = line.match(regProunce);
let meaning = line.match(regMeaning);
let Pronum = line.match(regProunceNum);
let Pos = line.match(regPOS);
try {
if (pronunce == null) {
pronunce = '';
// throw new Error('发音缺失');
}
if (meaning == null) {
meaning = '';
// throw new Error('含义缺失');
}
if (Pronum == null) {
Pronum = '';
// throw new Error('音调缺失');
}
if (Pos == null) {
Pos = '';
// throw new Error('词性缺失');
}
let set1 = new Set(pronunce[0]);
let set2 = new Set(meaning[0])
let ifInterSection = [...set1].some(x => set2.has(x));
if (ifInterSection) {
pronunce = ''
// throw new Error('特殊无发音')
}
let word = {
kanji: kanji[0],
pronunce: pronunce[0],
num: Pronum[0],
pos: Pos[0],
meaning: meaning[0],
wordCount:0,
correntCount:0
}
wordList.push(word);
} catch (error) {
console.log("出现异常" error.message);
}
})
localStorage.setItem('rawWordList',JSON.stringify(wordList));
});
}
//一定数目的乱序词单
function getSomeShuffledWords(number){
let wordList=JSON.parse(localStorage.getItem('rawWordList'));
let returnList=[];
if(wordList){
for(var i=0;i<number;i ){
returnList.push(wordList[Math.round((Math.random()*wordList.length))]);
}
}
return returnList;
}
/*
事件分析：
选择词库->乱序->生成词库
点击开始后，遍历取词
取词内部进行验证方法
遍历结束/提前结束/统计正确率
*/ `
