【正文】 if (()amp。 =0。 =false。amp。return array。 //return array[0]。 }else{ var percent = parseInt(success*100/len)+%。 }else { $(d).innerHTML = resultStr+(i)。 str = 。 resultStr+=font color=red+strChar1+/font。 newstr1+=strChar1。 newstr2+=strChar2。 resultStr2 += font color=red+strChar2+/font。 }else{ fail+=。 //正確的個(gè)數(shù)為 resultStr+=font color=blue+strChar1+/font。 //newstr1 為新的文章內(nèi)容放到外面的不過(guò)還沒(méi) color 的 newstr2+=strChar2。 //獲得當(dāng)前文章字符串的字符位置 var strChar2=(j++)。 var resultStr2 = 。 var newstr2=。 var j = 0。//成功字?jǐn)?shù)var fail = 0。 var len = (,)。$(typelen).value = typetoall。$(d1).innerText = carray[0]。var carray = new Array()。$(d5).innerHTML = str。 count = count。 //這個(gè)為考生所已打文章總長(zhǎng)度 if(stringlen == typetoall) { //這里就是文章被全部打完了 stop()。華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) if(percent = 100) over = false。 }else{ var percent = parseInt(typeLaterLen*100/len)。count++。$(d4).innerText = 。 //獲得文本框中值的長(zhǎng)度 over = true。 //獲得每次顯示出來(lái)的文章內(nèi)容 var typeLater = 。!over){ //當(dāng)當(dāng)前窗口打完并全部打完的var len = 0。 //獲得文本框中值的長(zhǎng)度 if(typeLaterLen=lenamp。 var typeLater = 。 //當(dāng)?shù)竭_(dá) 100%時(shí)停止時(shí)間的增長(zhǎng)}}2. 處理文章顯示窗口和文章完成度代碼：function aaa(obj){ var stringlen = //獲得全文的長(zhǎng)度 var len = 。if(middle==0) {$(submittest).disabled = false。).innerHTML = ft。(39。 //取出秒數(shù)$(speed).value = (typelen/t)*60。//$(timese).innerText = t。中文測(cè)試界面如圖 55：圖 55 中文測(cè)試界面圖華東交通大學(xué)畢業(yè)設(shè)計(jì)16打字核心部分代碼如下：1. 處理時(shí)間如倒計(jì)時(shí)等代碼：function timedCount(){t++。(2) 在項(xiàng)目中添加幾個(gè)需要的目錄文件夾分別為 admin、css 、data、images、includeAdmin 文件夾里面文件主要為后臺(tái)系統(tǒng)功能文件； css 文件夾為整個(gè)系統(tǒng)的樣式表文件夾；data 文件夾為數(shù)據(jù)庫(kù)和 Excel 表目錄；images 文件夾為系統(tǒng)圖片目錄；include 文件夾為系統(tǒng)用到的公共函數(shù)文件等；目錄結(jié)構(gòu)圖如下：圖 51 目錄結(jié)構(gòu)(2) 在 admin 目錄中添加幾個(gè)文件夾，分別為：css,image,include,up；目錄結(jié)構(gòu)圖如下：圖 52 目錄結(jié)構(gòu)(4)項(xiàng)目最終目錄文件結(jié)構(gòu)，如 53 所示華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)圖 53 文件結(jié)構(gòu) 打字測(cè)試模塊設(shè)計(jì)與實(shí)現(xiàn)首頁(yè)包括了學(xué)生登錄界面和入口，以及展示一些注釋和操作說(shuō)明，從入口開(kāi)始選擇進(jìn)入考試還是平常的打字練習(xí)。根據(jù)需求分析畫出 ER 圖。良好的數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)不僅可以減少數(shù)據(jù)冗余、提高查詢效率，而且還可以降低應(yīng)用程序的編寫難度，提高工作效率。 (8) 友情鏈接管理設(shè)置：添加系統(tǒng)的友情鏈接 欄目劃分圖如 42 圖所示。 (6) 組別管理設(shè)置：組別信息查詢功能、加入新的組別、刪除舊的組別（都是基于EXCEL 操作的） 。(4) 后臺(tái)首頁(yè)：后臺(tái)進(jìn)入頁(yè)面，管理員可以登錄系統(tǒng)后臺(tái)，需要填寫驗(yàn)證。 (2) 測(cè)試：進(jìn)入測(cè)試頁(yè)面，考生選擇中文測(cè)試還是英文測(cè)試，然后進(jìn)入到相對(duì)應(yīng)的頁(yè)面，考生選擇測(cè)試后進(jìn)入系統(tǒng)，根據(jù)系統(tǒng)提示進(jìn)行打字練習(xí)，完成后可以看到自己的成績(jī)信息。(1) 首頁(yè)：這是對(duì)整個(gè)網(wǎng)站的總體概括，是整個(gè)系統(tǒng)的入口點(diǎn)，同時(shí)也支持進(jìn)入后臺(tái)的鏈接。圖 41 總體功能模塊圖在線打字系統(tǒng)用戶登錄模塊 在線測(cè)速模塊 在線考試模塊 后臺(tái)管理模塊 成績(jī)導(dǎo)入導(dǎo)出模塊 學(xué)生信息導(dǎo)入導(dǎo)出模塊文章管理模塊華東交通大學(xué)畢業(yè)設(shè)計(jì)8 欄目總體設(shè)計(jì)本系統(tǒng)欄目有前臺(tái)和后臺(tái)兩部分，前臺(tái)主要包括首頁(yè)、測(cè)試、考試，后臺(tái)主要包括后臺(tái)首頁(yè)、系統(tǒng)設(shè)置、組別管理設(shè)置、文章管理設(shè)置、友情鏈接。網(wǎng)站總體功能有用戶登錄模塊、在線測(cè)試模塊、在線考試模塊、后臺(tái)管理模塊、成績(jī)導(dǎo)入導(dǎo)出模塊、學(xué)生信息導(dǎo)入導(dǎo)出模塊、文章管理模塊。 系統(tǒng)總體功能模塊設(shè)計(jì)對(duì)于開(kāi)發(fā)系統(tǒng)來(lái)說(shuō)，前期的總體設(shè)計(jì)規(guī)劃是必要的，也是必須的，因?yàn)樗鼘⒂绊懙秸麄€(gè)網(wǎng)站質(zhì)量的好壞和設(shè)計(jì)實(shí)現(xiàn)的進(jìn)度，所以，在開(kāi)發(fā)本系統(tǒng)時(shí)，必須先對(duì)其進(jìn)行總體的設(shè)計(jì)規(guī)劃，而使后面的工作能朝著預(yù)定的方向發(fā)展。服務(wù)性能穩(wěn)定，效率較高，所以這里選擇 Apache 作為本系統(tǒng)的服務(wù)器。Apache 服務(wù)器和 MYSQL 數(shù)據(jù)庫(kù)。同時(shí)，這個(gè)設(shè)計(jì)器能夠提供在線查看設(shè)計(jì)，所以對(duì)設(shè)計(jì)開(kāi)發(fā)很方便。利用此 IDE 可以很方便的進(jìn)行程序設(shè)計(jì)和調(diào)度，程序庫(kù)極大，可以很方便進(jìn)行一些基本的函數(shù)的調(diào)用。華東交通大學(xué)畢業(yè)設(shè)計(jì)吳 常 華：基于 B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 數(shù)據(jù)需求本系統(tǒng)需要建立 5 張主要的數(shù)據(jù)表，用于存放各個(gè)模塊的數(shù)據(jù)，其中有：管理員表，中文表，英文表，信息表（主表） ，班級(jí)表。 (7) 后臺(tái)進(jìn)行文章導(dǎo)入功能（中、英文）模塊：可以很方便地進(jìn)行中文和英文考試、測(cè)試文章進(jìn)行導(dǎo)入功能，同時(shí)能夠進(jìn)行增、刪、改、查等基本功能。查詢組別時(shí)，可以查看所有考生的成績(jī)及對(duì)其進(jìn)行管理。管理員能夠?qū)ψ约旱拿艽a進(jìn)行修改；系統(tǒng)參數(shù)設(shè)置可以進(jìn)行打字系統(tǒng)名字的更新、考試功能開(kāi)通與關(guān)閉、考試時(shí)間長(zhǎng)短設(shè)置、防作弊開(kāi)關(guān)、考生能否自己清空本次考試成績(jī)等功能。(3) 考生在線正式打字并提交成績(jī)模塊：選擇正式考試后，系統(tǒng)用戶就必須開(kāi)始進(jìn)行打字測(cè)速和測(cè)正確率了，打完所有的文章后，根據(jù)提示進(jìn)行提交成績(jī)，提交成功后返回頁(yè)面。用戶名這里采用學(xué)號(hào)制，首頁(yè)給出用戶操作手冊(cè)鏈接。 功能需求本系統(tǒng)共有８?jìng)€(gè)模塊，其中有①學(xué)生登錄功能；②用戶在線進(jìn)行在線打字測(cè)試功能模塊；③學(xué)生在線正式打字并提交成績(jī)模塊；④后臺(tái)管理員管理功能模塊；⑤管理員進(jìn)行使用 EXCEL 進(jìn)行成績(jī)及學(xué)生信息導(dǎo)入、導(dǎo)出功能模塊； 后臺(tái)進(jìn)行文章導(dǎo)入功能（中、○ 6英文）模塊 友情鏈接管理模塊。華東交通大學(xué)畢業(yè)設(shè)計(jì)4 法律可行性該平臺(tái)的開(kāi)發(fā)會(huì)不會(huì)在社會(huì)上引起侵權(quán)或其它責(zé)任問(wèn)題。優(yōu)化機(jī)制也是獨(dú)特的，事務(wù)處理方式也于其它數(shù)據(jù)庫(kù)管理系統(tǒng)不同，不亞于 Oracle 等數(shù)據(jù)庫(kù)管理系統(tǒng)，這些數(shù)據(jù)管理系統(tǒng)卻是收費(fèi)的。 (2)相對(duì)優(yōu)越性MYSQL 相對(duì)于其它數(shù)據(jù)庫(kù)管理系統(tǒng)來(lái)說(shuō)，數(shù)據(jù)庫(kù)引擎本身就不同，而且是十分高效的。MYSQL 的新特點(diǎn)：(1) 平臺(tái)化MYSQL 能夠在瀏覽中進(jìn)行管理，同時(shí)也支持命令行功能。它包括支持開(kāi)發(fā)的引擎（INNORDB）、標(biāo)準(zhǔn)的 SQL 語(yǔ)言、擴(kuò)展的特性(如復(fù)制、OLAP、分析)等功能。所以，選擇 PHP 語(yǔ)言作為開(kāi)發(fā)語(yǔ)言非常適合。對(duì)于網(wǎng)絡(luò)應(yīng)用程序來(lái)說(shuō) PHP 語(yǔ)言高效和開(kāi)發(fā)便捷。對(duì)于前者要求應(yīng)具備功能完備、易于使用等特點(diǎn)，而對(duì)于后者則要求能建立數(shù)據(jù)一致性和完整性強(qiáng)、數(shù)據(jù)安全性好的庫(kù)。而一旦此系統(tǒng)投入使用,不僅可以減少商家的工作強(qiáng)度，提高工作效率，而且方便了用戶的報(bào)名和交流信息，打破了傳統(tǒng)的模式，極大限度的方便了用戶，也為企業(yè)的進(jìn)一步推廣創(chuàng)造了條件，而且，目標(biāo)系統(tǒng)不是很復(fù)雜，開(kāi)發(fā)的周期較短，人員經(jīng)濟(jì)支出不大，所節(jié)省的大量人力、財(cái)力產(chǎn)生的效益將遠(yuǎn)遠(yuǎn)大于本管理系統(tǒng)的開(kāi)發(fā)成本，所以從經(jīng)濟(jì)方面來(lái)說(shuō)開(kāi)發(fā)此系統(tǒng)是可行的。當(dāng)然擴(kuò)展名可以設(shè)成別的擴(kuò)展名。 在 Apache 服務(wù)器的配置方面，要在 Apache 的配置文件文件中加入下面的字符串。畢竟，在一個(gè)對(duì)系統(tǒng)反映速度要求極嚴(yán)格的系統(tǒng)而言，恐怕只有 NSAPI 界面寫的 CGI 程序才能符合要求了。例如，先以 Linux 架的網(wǎng)站，在系統(tǒng)負(fù)荷過(guò)高時(shí)，可以快速地將整個(gè)系統(tǒng)移到 SUN 工作站上，不用重新編譯 CGI 程序。 PHPInter 上 PHP 支持了相當(dāng)多的通訊協(xié)議 (protocol)，包括了與電子郵件相關(guān)的 IMAP, POP3；網(wǎng)管系統(tǒng) SNMP；網(wǎng)絡(luò)新聞 NNTP；帳 號(hào)共用 NIS；全球信息網(wǎng) HTTP 及 Apache 服務(wù)器；目錄協(xié)議 LDAP 以及其它網(wǎng)絡(luò)的相關(guān)函數(shù)。MYSQL SERVER 提供強(qiáng)大的開(kāi)發(fā)工具和各類開(kāi)發(fā)特性，在大大提高開(kāi)發(fā)效率的同時(shí)，更因?yàn)楦咝颐赓M(fèi)，許多大型企業(yè)都在使用本數(shù)據(jù)庫(kù)系統(tǒng)，如百度、新浪網(wǎng)。華東交通大學(xué)畢業(yè)設(shè)計(jì)2 MYSQL SERVERMYSQL SERVER 是一個(gè)具備完全 Web 支持的數(shù)據(jù)庫(kù)產(chǎn)品，提供了對(duì)可擴(kuò)展標(biāo)記語(yǔ)言 (XML) 的核心支持以及在 Inter 上和防火墻外進(jìn)行查詢的能力，提供了以 Web 標(biāo)準(zhǔn)為基礎(chǔ)的擴(kuò)展數(shù)據(jù)庫(kù)編程功能。第三層服務(wù)器層，響應(yīng)整個(gè)系統(tǒng)的服務(wù)層，使用系統(tǒng)所需要的服務(wù)能夠在這里進(jìn)行處理，包括 APACHE 服務(wù)器程序的運(yùn)行機(jī)制解析都在這層表示出來(lái)，首先，接受數(shù)據(jù)層處理請(qǐng)求，服務(wù)器接受后處理完，返回給數(shù)據(jù)處理層。即除了輸入輸出在表示層，數(shù)據(jù)庫(kù)在數(shù)據(jù)層以外，全部的統(tǒng)計(jì)，匯總，分析，打印功能存放在功能層。第二層數(shù)據(jù)處理層，也稱功能層或業(yè)務(wù)邏輯層，是應(yīng)用的主體。頁(yè)面顯示層 服務(wù)器端數(shù)據(jù)處理層發(fā)送數(shù)據(jù)請(qǐng)求發(fā)送服務(wù)請(qǐng)求返回處理服務(wù)返回?cái)?shù)據(jù)到頁(yè)面圖 21 b/s 模式三層分層模型第一層頁(yè)面顯示層，靜態(tài)頁(yè)面層為用戶接口部分，是用戶與系統(tǒng)之間交互信息的界面它的主要功能是檢查用戶輸入的數(shù)據(jù)，顯示系統(tǒng)輸出的數(shù)據(jù)。b/s 結(jié)構(gòu)相對(duì)于傳統(tǒng)的 c/s 結(jié)構(gòu)，其優(yōu)勢(shì)之一是不用開(kāi)發(fā)和過(guò)多考慮用戶端的問(wèn)題，一切都交由瀏覽器來(lái)處理，只需考慮服務(wù)器端的應(yīng)用和功能，大大減少了 WEB 應(yīng)用程序的開(kāi)發(fā)難度。本系統(tǒng)可以作為較全的打字系統(tǒng)使用，支持后臺(tái)管理員管理，能夠高效地對(duì)成員成績(jī)進(jìn)行管理，可以做成中文或英文培訓(xùn)系統(tǒng)使用。 課題研究的目的及意義隨著中國(guó)在國(guó)際舞臺(tái)的影響力增加，已經(jīng)形成了學(xué)習(xí)中文熱風(fēng)，會(huì)講中文和在日常中能講一口不錯(cuò)的中文對(duì)外國(guó)朋友來(lái)說(shuō)已經(jīng)變得十分重要了，但于此同時(shí)，很多朋友中介限于能夠講中文，但具體中代表的含義和應(yīng)用就不會(huì)特別清楚了，相當(dāng)一部分是不會(huì)手寫中文的，他們覺(jué)得寫中文特別困難，本系統(tǒng)正是基于這種情況而設(shè)計(jì)，用戶能夠?yàn)g覽器 IE 中進(jìn)行中文輸寫的練習(xí)和識(shí)別。3) AJAX 支持應(yīng)用于程序的實(shí)時(shí)更新。結(jié)合使用數(shù)據(jù)緩存機(jī)制，使得系統(tǒng)在高負(fù)荷期也能夠很好地運(yùn)行。但是由于 ASP 本身的局限性合行系統(tǒng)有一些不可克服的缺陷，而采取了 PHP 和 AJAX 技術(shù)的系統(tǒng)性能上有了很大的改善,其主要表現(xiàn)在以下幾方面:1) 由于 ASP 頁(yè)面每次打開(kāi)都必須經(jīng)過(guò)先編譯后解釋的過(guò)程式，所以頁(yè)面在反復(fù)打開(kāi)時(shí)速度沒(méi)有任何提升，而 PHP 頁(yè)面只需要一次編譯后不需要重新編譯，直到該頁(yè)面被修改或 WEB 應(yīng)用程序重新啟動(dòng)?；?B/S 模式在線打字系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)論文目 錄華東交通大學(xué)畢業(yè)設(shè)計(jì)（論文）任務(wù)書 ...............................................................3華東交通大學(xué)畢業(yè)設(shè)計(jì)（論文）開(kāi)題報(bào)告書 .......................................................51 緒論 .......................................................................................................................1 課題背景 ....................................