基于javascript的用戶登錄畢業(yè)設計論文.doc

JavaScript+jQuery開發(fā)框架課程設計題 目 基于javascript的用戶登錄院 （系） 信息工程學院 專 業(yè) 班 級 14級計算機應用技術2班 學 生 姓 名 丁文彬 學 號 1432101205 設 計 地 點 新華學院教13 指 導 教 師 陳洋 起止時間：2016年5月30日至2016年6月5日1目 錄 一、 前言3 1.1課程設計思路3 1.2課程設計目標3二、關鍵技術4 2.1HTML相關概念4 2.2css5 2.3javascript6 三、總體設計7 四、 詳細設計9 五、運行結果19 六、課設總結19 七、參考文獻22一、 前言1.1課程設計思路 在日常生活中我們常常登錄用戶界面都需要輸入驗證碼，使用驗證碼可有效防止非法用戶的暴力嘗試，在現(xiàn)在的很多網(wǎng)站中都使用了各種驗證碼。在本課程設計中我們采用了較為簡單的驗證碼，就是采用隨機產(chǎn)生的數(shù)字或符號，生成一幅圖片， 圖片里加上一些干擾，由用戶識別其中的驗證碼信息，輸入表單提交網(wǎng)站驗證，驗證成功后才能使用某項功能。在此我通過定義字符集數(shù)字、字母實組成驗證碼，在利用函數(shù)表達式for循環(huán)生成6位驗證碼，驗證碼輸入完成后確定提交彈出提示框。另外在此登錄頁面中還加入了萬年歷方便用戶查看日期和時間。1.2課程設計目標1. 熟練使用javascript和css中的內(nèi)建對象最終實現(xiàn)一個登錄頁面的雛形。2熟練使用Get函數(shù)的使用和日期函數(shù)的調用，從而方便用戶查看時間。3熟練使用javascript和html實現(xiàn)用戶登錄，從而提高網(wǎng)頁訪問速度。 4能夠熟練javascript，通過咨詢和考察，最終確定并實驗證登錄。同時使用戶信息更加安全。二、關鍵技術2.1HTML相關概念1.HTML語言HTML語言(HypertextMarkupLanguage，中文通常稱為超文本置標語言或超文本標記語言)是一種文本類、解釋執(zhí)行的標記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。在WWW上，通常使用的發(fā)布語言是HTML，即超文本標識語言。當用瀏覽器打開網(wǎng)頁時，瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結構，然后根據(jù)解釋的結果顯示網(wǎng)頁內(nèi)容，正是因為如此，制作網(wǎng)頁的時候，如果不涉及HTML語言，幾乎是不可能的。如圖：WWW三個組成部分 圖2-1WWW的組成2.HTML文件結構 元素出現(xiàn)在文檔的開頭部分。與之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 元素定義HTML文檔的標題。與之間的內(nèi)容將顯示在瀏覽器窗口的標題欄。 HTML 文件的正文/元素表明是HTML文檔的主體部分。在與之間，通常都會有很多其它元素；這些元素和元素屬性構成HTML文檔的主體部分。 元素：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標記（如），也有一個結束的標記（如）。元素的標記要用一對尖括號括起來，并且結束的標記總是在開始的標記前加一個斜杠。HTML元素屬性:HTML元素可以有自己的相關屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。2.2css1.css簡介級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”，它是用來進行網(wǎng)頁風格設計。通過設立樣式表，可以統(tǒng)一地控制HTML中各標簽的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。2.css文件當要在站點上所有或部份的網(wǎng)頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中作一次更改，而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以 .css 做為文件擴展名，例如 Mystyles.css。2.3javascript 1javascript語言JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，響應用戶的各種操作。2.JavaScript嵌入HTML文件JavaScript代碼可直接嵌入HTML文件中，隨網(wǎng)頁一起傳送到客戶端瀏覽器，然后通過瀏覽器來解釋執(zhí)行。1)、JavaScript 語句插入 HTML的方式：（1)使用 標簽將語句嵌入文檔（2)將 JavaScript 源文件(.js)鏈接到 HTML 文檔中2)、JavaScript 語句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：當腳本被調用、事件被觸發(fā)時執(zhí)行，可保證在調用函數(shù)前，腳本已載入三、總體設計3.1通過定義字符集數(shù)字、字母實組成驗證碼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ù)表達式for循環(huán)生成6位驗證碼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通過輸入驗證碼確定提交彈出提示框functionvalidateCode()varinputCode=document.getElementById(inputCode).value;if(inputCode.length=0)alert(請輸入驗證碼！); elseif(inputCode.toUpperCase()!=code.toUpperCase()alert(驗證碼輸入有誤！);createCode();else alert(驗證碼正確！);3.4 通過時間函數(shù)獲取當前時間setInterval(timeStr=new Date().toLocaleString();timer.innerText=timeStr;,1000)3.5完成效果四、 詳細設計4.1網(wǎng)頁的用戶登錄界面網(wǎng)站的網(wǎng)頁的用戶登錄界面為用戶的用戶名和密碼輸入界面，并且包含驗證碼如果用戶驗證碼輸入錯誤則顯示輸入錯誤，同樣輸入正確也會顯示。用Javascript寫入程序和讀取程序。登錄信息主要包括用戶名、密碼、驗證碼。JavaScript驗證碼生成代碼 .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; /驗證碼的長度 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); /所有候選組成驗證碼的字符，當然也可以用中文的 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(請輸入驗證碼！); else if (inputCode.toUpperCase() != code.toUpperCase() alert(驗證碼輸入有誤！); createCode(); else alert(驗證碼正確！); 用戶名： 密碼： 請輸入： 看不清換一張 4.2網(wǎ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; /當日期小于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();五、運行結果4.1網(wǎng)頁的日歷插件截圖圖4-1網(wǎng)頁的日歷插件截圖4.2網(wǎng)頁的登錄界面截圖4-2網(wǎng)頁的登錄界面截圖4.3網(wǎng)頁的整體界面4.3網(wǎng)頁的整體界面六、課設總結通過這次程序設計，我感慨頗多，首先認識到集體力量的偉大，沒有集體智慧的結合，就不會有我們登錄界面的運行，其次，我感覺這次課程設計不再局限于書本知識，而是讓我們學以致用，是理論與實際相結合的產(chǎn)物。通過這次課程設計，我也感覺到自己的水平還有待提高。我們有很多靈感和創(chuàng)意非常好，但因為技術上的缺陷卻無法更好的展示它。經(jīng)常說創(chuàng)意大于技術，但如果沒有技術的支持，再好的創(chuàng)意也是紙上談兵，毫無用處。所以我們距離制造出自己想要的作品還有很長的路要走，要多學多看，領悟優(yōu)秀作品的思想，啟發(fā)自己的靈感，最重要的，提高技術。只有掌握了技術，自己才可以變被動為主動，制造出自己理想中的作品。在課程設計過程中，我們不斷發(fā)現(xiàn)錯誤，不斷改正，不斷領悟，不斷獲取。最終的檢測調試環(huán)節(jié)，本身就是在踐行“過而能改，善莫大焉”的知行觀。這次課程設計終于順利完成了，在設計中遇到了很多問題，最后在老師的指導下，終于游逆而解。課程設計誠然是一門專業(yè)課，給我很多專業(yè)知識以及專業(yè)技能上的提升，同時又是一門講道課，一門辯思課，給了我許多道，給了我很多思，給了我莫大的空間。同時，設計讓我感觸很深。使我對抽象的理論有了具體的認識.。我認為，在這學期的實驗中，不僅培養(yǎng)了獨立思考、動手操作的能力，在各種其它能力上也都有了提高。更重要的是，在實驗課上，我們學會了很多學習的方法。而這是日后最實用的，真的是受益匪淺。七、參考文獻1 劉德山JavaScript+HTML網(wǎng)站開發(fā)M.北京：人民郵電出版社，2012.2 郭克華JavaScript WEB網(wǎng)站開發(fā)M.北京：清華大學出版社，2013.3 PaulWiltonJeremyMcPeak. JavaScript從入門到經(jīng)典M.北京：清華大學出版社，2010.4劉軍. 精通JavascriptM.北京：清華大學出版社，2010.5 澤卡斯JavaScript高級程序設計M.北京：清華大學出版社，2013.21