【文章內(nèi)容簡介】 交自己的本次的成績。(4) 后臺首頁：后臺進入頁面，管理員可以登錄系統(tǒng)后臺，需要填寫驗證。 (5) 系統(tǒng)設(shè)置：進行系統(tǒng)名稱的設(shè)置，考試時間設(shè)置，考試開關(guān)（打開后用戶才能進入系統(tǒng)操作），防作弊開關(guān)（選中后一個考試只能用一臺機子），清空成績（選中后用戶可以清空自己的成績）。 (6) 組別管理設(shè)置：組別信息查詢功能、加入新的組別、刪除舊的組別（都是基于EXCEL 操作的） 。(7) 文章管理設(shè)置：選擇查詢中文和英文內(nèi)容，同時支持在線修改；添加新的文章和刪除舊的文章。 (8) 友情鏈接管理設(shè)置：添加系統(tǒng)的友情鏈接 欄目劃分圖如 42 圖所示。圖 42 欄目劃分圖 數(shù)據(jù)庫設(shè)計在一個數(shù)據(jù)庫應(yīng)用系統(tǒng)的開發(fā)過程中，數(shù)據(jù)庫的設(shè)計是整個系統(tǒng)的基礎(chǔ)。良好的數(shù)據(jù)結(jié)構(gòu)設(shè)計不僅可以減少數(shù)據(jù)冗余、提高查詢效率，而且還可以降低應(yīng)用程序的編寫難度，提高工作效率。 數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計在需求分析階段所得到的應(yīng)用需求應(yīng)該首先抽象為信息世界的結(jié)構(gòu)，才能更好的更在線打字系統(tǒng)欄目首頁 測試 考試 系統(tǒng)設(shè)置后臺首頁 組別設(shè)置 文章設(shè)置 友情鏈接華東交通大學畢業(yè)設(shè)計吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計與實現(xiàn)準確的用數(shù)據(jù)庫管理系統(tǒng)實現(xiàn)這些需求。根據(jù)需求分析畫出 ER 圖。如下圖中文文章實體如 43 圖所示中文文章編號 文章標題 文章內(nèi)容圖 43 中文文章英文文章實體如 44 所示圖英文文章編號 文章標題 文章內(nèi)容圖 44 英文文章成績實體如 44 圖所示成績信息編號 學號 文章內(nèi)容中文速度 英文速度 中文信息中文正確率 英文正確率英 文 信 息學生 I P圖 44 成績實體組別實體如 45 圖所示組別實體編號 班級 I D 組別 I D圖 45 組別實體管理員信息實體如 46 圖所示管理員實體編號 姓名 密碼 初始班級 中文 I D 英文 I D圖 46 管理員實體華東交通大學畢業(yè)設(shè)計10實體聯(lián)系 ER 圖如 44 圖所示學生類型管理員類型考試 測試進入進入打字信息 測試信息提交成績成績信息E X C E L 成績文檔組別組別信息E X C E L 組別文檔班級班級信息E X C E L 班級文檔錄入文章組別組別信息E X C E L 組別文檔導出圖 410 實體聯(lián)系 ER 圖 數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(1) admin(管理員 )表如 42 所示表 41 管理員表中文名稱 字段名 數(shù)據(jù)類型 大小編號 Id INT 10管理員的姓名 Name VARCHAR 50管理員的密碼 Pass VARCHAR 50管理員班級初始 Table VARCHAR 50中文ID(cookie) Chid INT 5對應(yīng)英文ID Enid INT 5(2) chinese(中文文章)表如 42 所示華東交通大學畢業(yè)設(shè)計吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計與實現(xiàn)表 42 中文文章表中文名稱 字段名 數(shù)據(jù)類型 大小編號 Id INT 10文章標題 Title VARCHAR 30文章內(nèi)容 Content VARCHAR 500(3) english(英文文章)表如 43 所示表 43 英文文章表中文名稱 字段名 數(shù)據(jù)類型 大小編號 Id INT 10文章標題 Title VARCHAR 30文章內(nèi)容 Content VARCHAR 500(4) class4(中間表 )表如 44 所示表 44 組別表中文名稱 字段名 數(shù)據(jù)類型 大小編號 Id INT 10組別ID Ctable VARCHAR 10中間表名 Class VARCHAR 20(5) class4(成績信息 )表如 45 所示表 45 成績信息表中文名稱 字段名 數(shù)據(jù)類型 大小編號 Id INT 10學號 Sid VARCHAR 12學生姓名 Sname VARCHAR 10中文速度 Chspeed VARCHAR 4中文正確率 Chcrate VARCHAR 6中文信息 Chstr VARCHAR 1000英文速度 Enspeed VARCHAR 4英文正確率 Encrate VARCHAR 6英文信息 Enstr VARCHAR 2022考生IP Ip VARCHAR 205 詳細設(shè)計與實現(xiàn) 系統(tǒng)開發(fā)模型詳細設(shè)計(1) 打開 ZEND Studio,新建一個項目名稱為 dazi,單擊 FileNewPHP project，項目華東交通大學畢業(yè)設(shè)計12名稱為 dazi，然后選擇項目位置，點擊完成即可。(2) 在項目中添加幾個需要的目錄文件夾分別為 admin、css 、data、images、includeAdmin 文件夾里面文件主要為后臺系統(tǒng)功能文件； css 文件夾為整個系統(tǒng)的樣式表文件夾；data 文件夾為數(shù)據(jù)庫和 Excel 表目錄；images 文件夾為系統(tǒng)圖片目錄；include 文件夾為系統(tǒng)用到的公共函數(shù)文件等；目錄結(jié)構(gòu)圖如下：圖 51 目錄結(jié)構(gòu)(2) 在 admin 目錄中添加幾個文件夾，分別為：css,image,include,up；目錄結(jié)構(gòu)圖如下：圖 52 目錄結(jié)構(gòu)(4)項目最終目錄文件結(jié)構(gòu)，如 53 所示華東交通大學畢業(yè)設(shè)計吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計與實現(xiàn)圖 53 文件結(jié)構(gòu) 打字測試模塊設(shè)計與實現(xiàn)首頁包括了學生登錄界面和入口，以及展示一些注釋和操作說明，從入口開始選擇進入考試還是平常的打字練習。如 52 所示華東交通大學畢業(yè)設(shè)計14圖 52 系統(tǒng)首頁結(jié)構(gòu)(1) 測試界面測試界面主要是學生進入本界面后，就可以進行常規(guī)的打字練習，無需提交本次操作的成績到系統(tǒng)，進入測試前系統(tǒng)會判別用戶的身份信息，如果不是本系統(tǒng)用戶，則測試和考試都將進不去，同時系統(tǒng)給以相應(yīng)的提示信息界面； 是本系統(tǒng)的用戶操作說明文件，進入系統(tǒng)前用戶可以參考這個操作手冊；班級也需在填寫；成功進入測試提示框如圖 53： 圖 53 進入測試提示框圖進入系統(tǒng)后進入選擇類型界面如圖 54：華東交通大學畢業(yè)設(shè)計吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計與實現(xiàn)圖 54 選擇類型界面(2) 中文測試界面進入中文測試界面，用戶或者學生就可以進行中文字的打字練習，一旦開始進行打字后，系統(tǒng)開始進行倒計時，時間為管理員設(shè)置的時間，一到時間，本次打字則完成，自動提交成績，同時系統(tǒng)開始記錄打字速度、正確率等信息，中文輸入錯誤，字體會顯示紅色，表明本字或詞輸入錯誤，可以重新輸入，中文輸入正確，則顯示綠色，當本篇文章全部輸入完成后，系統(tǒng)會提示本次的打字信息如正確率、打字速度等，并可以提交本次測試成績。中文測試界面如圖 55：圖 55 中文測試界面圖華東交通大學畢業(yè)設(shè)計16打字核心部分代碼如下：1. 處理時間如倒計時等代碼：function timedCount(){t++。middle = second t。//$(timese).innerText = t。 //把秒數(shù)放到隱藏中 t 是以過的時間，middle 是余下的時間var typelen = 。 //取出秒數(shù)$(speed).value = (typelen/t)*60。 //設(shè)置速度var ft = formatTime(middle)。(39。time39。).innerHTML = ft。exu = setTimeout(timedCount(),1000)。if(middle==0) {$(submittest).disabled = false。stop()。 //當?shù)竭_ 100%時停止時間的增長}}2. 處理文章顯示窗口和文章完成度代碼：function aaa(obj){ var stringlen = //獲得全文的長度 var len = 。 //獲得顯示文章總長度 var middle。 var typeLater = 。 //獲得文本框中的值 var typeLaterLen = 。 //獲得文本框中值的長度 if(typeLaterLen=lenamp。amp。!over){ //當當前窗口打完并全部打完的var len = 0。 //獲得文章總長度 var everylen = 。 //獲得每次顯示出來的文章內(nèi)容 var typeLater = 。 //獲得文本框中的值 var typeLaterLen = 0。 //獲得文本框中值的長度 over = true。 //over 為全部打完的標志 $(d2).innerText = 100%。$(d4).innerText = 。$(d).innerHTML =。count++。var middle = 1。 }else{ var percent = parseInt(typeLaterLen*100/len)。 $(d2).innerText = percent +%。華東交通大學畢業(yè)設(shè)計吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計與實現(xiàn) if(percent = 100) over = false。 } var typetoall = slen*count + typeLaterLen。 //這個為考生所已打文章總長度 if(stringlen == typetoall) { //這里就是文章被全部打完了 stop()。 alert(you are good)。 count = count。 }str = arr[count]。$(d5).innerHTML = str。$(d).innerHTML = str。var carray = new Array()。carray = pareStr(str,typeLater,middle)。$(d1).innerText = carray[0]。 //執(zhí)行 pareStr 函數(shù)if(carray[1] == 1)middle = 0。$(typelen).value = typetoall。 //把考生已打字長度寫入隱藏表單}3. 比較兩個字符串匹配情況代碼：function pareStr(str1,str2,middle){ //str1 為文章字符串 str2 為輸入的字符串 var array = new Array()。 var len = (,)。 //取得兩字符串中最短的長度 var success = 0。//成功字數(shù)var fail = 0。//失敗字數(shù)var i = 0。 var j = 0。 var newstr1=。 var newstr2=。 var resultStr = 。 var resultStr2 = 。 while(success+faillen){ //當輸入字符總長度少于文章總長度時 if(==){ //如果 newstr1 長度等于 newstr2 時 var strChar1=(i++)。 //獲得當前文章字符串的字符位置 var strChar2=(j++)。 //獲得當前文本框字符串的字符位置 newstr1+=strChar1。 //newstr1 為新的文章內(nèi)容放到外面的不過還沒 color 的 newstr2+=strChar2。 //newstr2 為新的文本框內(nèi)容放到外面的 if(strChar1==strChar2){ //如果輸入相同華東交通大學畢業(yè)設(shè)計18 success+=。 //正確的個數(shù)為 resultStr+=font color=blue+strChar1+/font。 resultStr2 += font color=blue+strChar2+/font。 }else{ fail+=。 resultStr+=font color=red+strChar1+/font。 res