JavaScript+jQuery開發(fā)框架課程設(shè)計(jì)題 目 基于javascript的用戶登錄院 （系） 信息工程學(xué)院 專 業(yè) 班 級 14級計(jì)算機(jī)應(yīng)用技術(shù)2班 學(xué) 生 姓 名 丁文彬 學(xué) 號 1432101205 設(shè) 計(jì) 地 點(diǎn) 新華學(xué)院教13 指 導(dǎo) 教 師 陳洋 起止時間：2016年5月30日至2016年6月5日1目 錄 一、 前言3 1.1課程設(shè)計(jì)思路3 1.2課程設(shè)計(jì)目標(biāo)3二、關(guān)鍵技術(shù)4 2.1HTML相關(guān)概念4 2.2css5 2.3javascript6 三、總體設(shè)計(jì)7 四、 詳細(xì)設(shè)計(jì)9 五、運(yùn)行結(jié)果19 六、課設(shè)總結(jié)19 七、參考文獻(xiàn)22一、 前言1.1課程設(shè)計(jì)思路 在日常生活中我們常常登錄用戶界面都需要輸入驗(yàn)證碼，使用驗(yàn)證碼可有效防止非法用戶的暴力嘗試，在現(xiàn)在的很多網(wǎng)站中都使用了各種驗(yàn)證碼。在本課程設(shè)計(jì)中我們采用了較為簡單的驗(yàn)證碼，就是采用隨機(jī)產(chǎn)生的數(shù)字或符號，生成一幅圖片， 圖片里加上一些干擾，由用戶識別其中的驗(yàn)證碼信息，輸入表單提交網(wǎng)站驗(yàn)證，驗(yàn)證成功后才能使用某項(xiàng)功能。在此我通過定義字符集數(shù)字、字母實(shí)組成驗(yàn)證碼，在利用函數(shù)表達(dá)式for循環(huán)生成6位驗(yàn)證碼，驗(yàn)證碼輸入完成后確定提交彈出提示框。另外在此登錄頁面中還加入了萬年歷方便用戶查看日期和時間。1.2課程設(shè)計(jì)目標(biāo)1. 熟練使用javascript和css中的內(nèi)建對象最終實(shí)現(xiàn)一個登錄頁面的雛形。2熟練使用Get函數(shù)的使用和日期函數(shù)的調(diào)用，從而方便用戶查看時間。3熟練使用javascript和html實(shí)現(xiàn)用戶登錄，從而提高網(wǎng)頁訪問速度。 4能夠熟練javascript，通過咨詢和考察，最終確定并實(shí)驗(yàn)證登錄。同時使用戶信息更加安全。二、關(guān)鍵技術(shù)2.1HTML相關(guān)概念1.HTML語言HTML語言(HypertextMarkupLanguage，中文通常稱為超文本置標(biāo)語言或超文本標(biāo)記語言)是一種文本類、解釋執(zhí)行的標(biāo)記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。在WWW上，通常使用的發(fā)布語言是HTML，即超文本標(biāo)識語言。當(dāng)用瀏覽器打開網(wǎng)頁時，瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結(jié)構(gòu)，然后根據(jù)解釋的結(jié)果顯示網(wǎng)頁內(nèi)容，正是因?yàn)槿绱耍谱骶W(wǎng)頁的時候，如果不涉及HTML語言，幾乎是不可能的。如圖：WWW三個組成部分 圖2-1WWW的組成2.HTML文件結(jié)構(gòu) 元素出現(xiàn)在文檔的開頭部分。與之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 元素定義HTML文檔的標(biāo)題。與之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。 HTML 文件的正文/元素表明是HTML文檔的主體部分。在與之間，通常都會有很多其它元素；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。 元素：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標(biāo)記（如），也有一個結(jié)束的標(biāo)記（如）。元素的標(biāo)記要用一對尖括號括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠。HTML元素屬性:HTML元素可以有自己的相關(guān)屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。2.2css1.css簡介級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)簽的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。2.css文件當(dāng)要在站點(diǎn)上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中作一次更改，而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 Mystyles.css。2.3javascript 1javascript語言JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，響應(yīng)用戶的各種操作。2.JavaScript嵌入HTML文件JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。1)、JavaScript 語句插入 HTML的方式：（1)使用 標(biāo)簽將語句嵌入文檔（2)將 JavaScript 源文件(.js)鏈接到 HTML 文檔中2)、JavaScript 語句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：當(dāng)腳本被調(diào)用、事件被觸發(fā)時執(zhí)行，可保證在調(diào)用函數(shù)前，腳本已載入三、總體設(shè)計(jì)3.1通過定義字符集數(shù)字、字母實(shí)組成驗(yàn)證碼varcodeChars=newArray(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z);3.2通過函數(shù)表達(dá)式for循環(huán)生成6位驗(yàn)證碼varcodeLength=6;for(vari=0;icodeLength;i+)varcharNum=Math.floor(Math.random()*52);code+=codeCharscharNum;if(checkCode)checkCode.className=code;checkCode.innerHTML=code;3.3通過輸入驗(yàn)證碼確定提交彈出提示框functionvalidateCode()varinputCode=document.getElementById(inputCode).value;if(inputCode.length=0)alert(請輸入驗(yàn)證碼！); elseif(inputCode.toUpperCase()!=code.toUpperCase()alert(驗(yàn)證碼輸入有誤！);createCode();else alert(驗(yàn)證碼正確！);3.4 通過時間函數(shù)獲取當(dāng)前時間setInterval(timeStr=new Date().toLocaleString();timer.innerText=timeStr;,1000)3.5完成效果四、 詳細(xì)設(shè)計(jì)4.1網(wǎng)頁的用戶登錄界面網(wǎng)站的網(wǎng)頁的用戶登錄界面為用戶的用戶名和密碼輸入界面，并且包含驗(yàn)證碼如果用戶驗(yàn)證碼輸入錯誤則顯示輸入錯誤，同樣輸入正確也會顯示。用Javascript寫入程序和讀取程序。登錄信息主要包括用戶名、密碼、驗(yàn)證碼。JavaScript驗(yàn)證碼生成代碼 .code background:url(code.gif); font-family:Arial; font-style:italic; color:blue; font-size:18px; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; float:left; cursor:pointer; width:85px; height:35px; line-height:40px; text-align:center; vertical-align:middle; margin-left:235px; margin-top:-30px; a text-decoration:none; font-size:12px; color:#288bc4;margin-top:-30px; #formwrapper width:410px;margin:150px auto;padding:20px;text-align:left;border:3px ridge; var code; function createCode() code = ; var codeLength = 6; /驗(yàn)證碼的長度 var checkCode = document.getElementById(checkCode); var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z); /所有候選組成驗(yàn)證碼的字符，當(dāng)然也可以用中文的 for (var i = 0; i codeLength; i+) var charNum = Math.floor(Math.random() * 52); code += codeCharscharNum; if (checkCode) checkCode.className = code; checkCode.innerHTML = code; function validateCode() var inputCode = document.getElementById(inputCode).value; if (inputCode.length = 0) alert(請輸入驗(yàn)證碼！); else if (inputCode.toUpperCase() != code.toUpperCase() alert(驗(yàn)證碼輸入有誤！); createCode(); else alert(驗(yàn)證碼正確！); 用戶名： 密碼： 請輸入： 看不清換一張 4.2網(wǎng)頁的日歷插件萬年歷!-/設(shè)置當(dāng)前時間函數(shù)function setToday() var now=new Date(); var day=now.getDate(); var month=now.getMonth(); var year=now.getYear(); if(year1000) year-; document.wannianli.year.value=year; else month-; document.wannianli.month.selectedIndex=month; displayCalendar(month,year); /顯示下一個月的所選年份的日歷function setNextMonth() var year=document.wannianli.year.value; if(isFourDigitYear(year) var day=0; var month=document.wannianli.month.selectedIndex; if(month=11) month=0; year+; document.wannianli.year.value=year; else month+; document.wannianli.month.selectedIndex=month; displayCalendar(month,year); /顯示下一年的日歷function setNextYear() var year=document.wannianli.year.value; if(isFourDigitYear(year) var day=0; var month=document.wannianli.month.selectedIndex; year+; document.wannianli.year.value=year; displayCalendar(month,year); /日歷輸入函數(shù)function displayCalendar(month,year) month=parseInt(month); year=parseInt(year); var i=0; var days=getDaysInMonth(month+1,year); var firstOfMonth=new Date(year,month,1); /日期所在月份的第幾天 var startingPos=firstOfMonth.getDay(); days += startingPos; /輸出日歷表頭、換行和虛線 document.calButtons.calPage.value = Su Mo Tu We Th Fr Sa ; document.calButtons.calPage.value += n-; /在月前沒有日期的位置輸出空格 for (i = 0; i startingPos; i+) if (i%7=0) document.calButtons.calPage.value += n; document.calButtons.calPage.value += ; /在被7整除余數(shù)為零時換行 for ( i=startingPos; idays; i+) if (i%7=0) document.calButtons.calPage.value +=n; /當(dāng)日期小于10時，前面加0 if (i-startingPos+110) document.calButtons.calPage.value += 0; document.calButtons.calPage.value += i-startingPos+1; document.calButtons.calPage.value += ; /在超過日期數(shù)的位置上輸出空格 for (i=days;i萬年歷一月二月三月四月五月六月七月八月九月十月十一月十二月 function today()var now=new Date();var day=now.getDate();var month=now.getMonth();var year=now.getYear();if(year2000)year=year+1900;document.write(今天：+year+年+(month+1)+月+day+日);today();五、運(yùn)行結(jié)果4.1網(wǎng)頁的日歷插件截圖圖4-1網(wǎng)頁的日歷插件截圖4.2網(wǎng)頁的登錄界面截圖4-2網(wǎng)頁的登錄界面截圖4.3網(wǎng)頁的整體界面4.3網(wǎng)頁的整體界面六、課設(shè)總結(jié)通過這次程序設(shè)計(jì)，我感慨頗多，首先認(rèn)識到集體力量的偉大，沒有集體智慧的結(jié)合，就不會有我們登錄界面的運(yùn)行，其次，我感覺這次課程設(shè)計(jì)不再局限于書本知識，而是讓我們學(xué)以致用，是理論與實(shí)際相結(jié)合的產(chǎn)物。通過這次課程設(shè)計(jì)，我也感覺到自己的水平還有待提高。我們有很多靈感和創(chuàng)意非常好，但因?yàn)榧夹g(shù)上的缺陷卻無法更好的展示它。經(jīng)常說創(chuàng)意大于技術(shù)，但如果沒有技術(shù)的支持，再好的創(chuàng)意也是紙上談兵，毫無用處。所以我們距離制造出自己想要的作品還有很長的路要走，要多學(xué)多看，領(lǐng)悟優(yōu)秀作品的思想，啟發(fā)自己的靈感，最重要的，提高技術(shù)。只有掌握了技術(shù)，自己才可以變被動為主動，制造出自己理想中的作品。在課程設(shè)計(jì)過程中，我們不斷發(fā)現(xiàn)錯誤，不斷改正，不斷領(lǐng)悟，不斷獲取。最終的檢測調(diào)試環(huán)節(jié)，本身就是在踐行“過而能改，善莫大焉”的知行觀。這次課程設(shè)計(jì)終于順利完成了，在設(shè)計(jì)中遇到了很多問題，最后在老師的指導(dǎo)下，終于游逆而解。課程設(shè)計(jì)誠然是一門專業(yè)課，給我很多專業(yè)知識以及專業(yè)技能上的提升，同時又是一門講道課，一門辯思課，給了我許多道，給了我很多思，給了我莫大的空間。同時，設(shè)計(jì)讓我感觸很深。使我對抽象的理論有了具體的認(rèn)識.。我認(rèn)為，在這學(xué)期的實(shí)驗(yàn)中，不僅培養(yǎng)了獨(dú)立思考、動手操作的能力，在各種其它能力上也都有了提高。更重要的是，在實(shí)驗(yàn)課上，我們學(xué)會了很多學(xué)習(xí)的方法。而這是日后最實(shí)用的，真的是受益匪淺。七、參考文獻(xiàn)1 劉德山JavaScript+HTML網(wǎng)站開發(fā)M.北京：人民郵電出版社，2012.2 郭克華JavaScript WEB網(wǎng)站開發(fā)M.北京：清華大學(xué)出版社，2013.3 PaulWiltonJeremyMcPeak. JavaScript從入門到經(jīng)典M.北京：清華大學(xué)出版社，2010.4劉軍. 精通JavascriptM.北京：清華大學(xué)出版社，2010.5 澤卡斯JavaScript高級程序設(shè)計(jì)M.北京：清華大學(xué)出版社，2013.21