利用JQuery实现静态网页的背单词系统

Posted on | In

背单词系统演示

简介

这是我利用JQuery写的一个背单词系统，主要原理是通过XML文件注入单词与中文解释，然后用JQuery来解析XML读取英文单词及其介绍部分，在将解析后的内容将随机排序后依次显示在网页供默写用。

XML文件

XML文件根标签是<wordbook>，然后每个单词用一个<item>标签，单词本身用<word>标签，而单词翻译用的是<trans>标签。

这是有一个单词的XML单词本

1
2
3
4
5
6
7
8
9
10
11
12
13
<wordbook>
    <item>
    	<word>declare</word>
    	<trans>
    		<![CDATA[vt. 宣布，声明；断言，宣称 vi. 声明，宣布]]>
    	</trans>
    	<phonetic>
    		<![CDATA[[dɪ'klɛr]]]>
    	</phonetic>
    	<tags></tags>
    	<progress>1</progress>
    </item>
</wordbook>

XML文件的解析步骤

  1. 用$.get(url,callback)函数来读取XML文件，并将读取的内容存储在data里面，然后遍历data；
  2. 通过$(this).find("word").html()函数来获取<word>标签里面的单词；
  3. 通过$(this).find("trans").html()函数来获取<trans>标签里面的翻译，这里的翻译需要去头去尾；
  4. 将解析出来的单词与翻译存储到一个数组里面，供调用。
1
2
3
4
5
6
7
8
9
10
11
$.get("xml/words.xml", function(data) {
	$(data).find("item").each(function(index) {
		var name = $(this).find("word").html();
		var trans = $(this).find("trans").html();
		var notice = trans.substring(9, trans.length - 3);
		words[index] = {
			'name': name,
			'notice': notice
		};
	})
})

单词数组的随机排序

为了达到每次练习得到一个随机练习的效果，在每次加载获得单词过后都会对单词数组进行一个随机排序，因为JQuery里可以利用sort函数来排序，如果随机传-1/1的话就可以实现随机效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//随机生成-1与1
function randomsort(a, b) {
	return Math.random() > .5 ? -1 : 1;
}
$.get("xml/words.xml", function(data) {
	$(data).find("item").each(function(index) {
		debugger;
		var name = $(this).find("word").html();
		var trans = $(this).find("trans").html();
		var notice = trans.substring(9, trans.length - 3);
		words[index] = {
    		'name': name,
			'notice': notice
		};
	})
	words.sort(randomsort);// 利用随机生成的-1与1来对单词数组随机排序
	$("#btn").trigger("click");
})

Cookie的读取与写入

因为这里是静态网页所以没办法利用服务器来在线存储练习的成绩数据，只好折中利用浏览器的Cookie来存储rightcount和allcount这两组数据。

  1. 先利用document.cookie来获取浏览器种的cookie数据；
  2. 利用split(";")来分解cookie里面个每一个数据；
  3. 利用split("=")来解析出每个cookie字段里面的key和value；
  4. 将解析出来的值赋值分别赋值给全局变量rightcount和allcount。
1
2
3
4
5
6
7
8
9
10
var cookies = document.cookie;
var cookie = cookies.split(";")
for(var i = 0; i < cookie.length; i++) {
var key = cookie[i].split("=")[0].trim();
	if("rightcount" == key) {
		rightcount = cookie[i].split("=")[1].trim();
	} else if("allcount" == key) {
		allcount = cookie[i].split("=")[1].trim();
	}
}

整个HMLT练习框架

这个框架包裹操作说明、单词提示、输入结果提示、统计结果、输入框、更新单词按钮、帮助按钮。

操作界面

其主要代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
	<div id="main_frame">
		<div id="main" style="text-align: center; width: 100%;">
			<p id="ts">
				Notice：按照提示输入对应单词，当提示输入正确后按Enter键进入下一单词。
			</p>
			<p id="hint"></p>
			<div style="width: 80%;margin: auto; margin-bottom: 10px;">
				<span id="notice" style="float: left;"></span>
				<a style="float: right;" id="result"></a><br />
			</div>
			<input type="text" id="text">
			<p></p>
			<a type="button" name="" id="btn" width="40%" href="#">更新</a>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a type="button" id="help" width="40%" href="#">帮助</a>
		</div>
	</div>
</body>

最终效果

因为单词词库的限制，所以目前整个单词库只有50+个单词，后续会更新更多的单词库进去，点击这里查看效果。

-------------本文结束感谢您的阅读-------------