利用JQuery實現靜態網頁的背單詞系統
背單詞
簡介
這是我利用JQuery寫的一個背單詞系統，主要原理是通過XML文件注入單詞與中文解釋，然后用JQuery來解析XML讀取英文單詞及其介紹部分，在將解析后的內容將隨機排序后依次顯示在網頁供默寫用。
XML文件
XML文件根標簽是<wordbook>，然后每個單詞用一個<item>標簽，單詞本身用<word>標簽，而單詞翻譯用的是<trans>標簽。
這是有一個單詞的XML單詞本
<wordbook>
<item>
<word>declare</word>
<trans>
<![CDATA[vt. 宣布，聲明；斷言，宣稱 vi. 聲明，宣布]]>
</trans>
<phonetic>
<![CDATA[[dɪ'klɛr]]]>
</phonetic>
<tags></tags>
<progress>1</progress>
</item>
</wordbook>
XML文件的解析步驟
- 用
$.get(url,callback)函數來讀取XML文件，並將讀取的內容存儲在data里面，然后遍歷data； - 通過
$(this).find("word").html()函數來獲取<word>標簽里面的單詞； - 通過
$(this).find("trans").html()函數來獲取<trans>標簽里面的翻譯，這里的翻譯需要去頭去尾； - 將解析出來的單詞與翻譯存儲到一個數組里面，供調用。
$.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與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這兩組數據。
- 先利用
document.cookie來獲取瀏覽器種的cookie數據； - 利用
split(";")來分解cookie里面個每一個數據； - 利用
split("=")來解析出每個cookie字段里面的key和value； - 將解析出來的值賦值分別賦值給全局變量
rightcount和allcount。
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練習框架
這個框架包裹操作說明、單詞提示、輸入結果提示、統計結果、輸入框、更新單詞按鈕、幫助按鈕。
操作界面
其主要代碼如下：
<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> <a type="button" id="help" width="40%" href="#">幫助</a> </div> </div> </body>
最終效果
因為單詞詞庫的限制，所以目前整個單詞庫只有50+個單詞，后續會更新更多的單詞庫進去，點擊這里查看效果。