基于javascript的用户登录毕业设计论文.doc

JavaScript+jQuery开发框架课程设计题 目 基于javascript的用户登录院 （系） 信息工程学院 专 业 班 级 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课程设计思路 在日常生活中我们常常登录用户界面都需要输入验证码，使用验证码可有效防止非法用户的暴力尝试，在现在的很多网站中都使用了各种验证码。在本课程设计中我们采用了较为简单的验证码，就是采用随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰，由用户识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。在此我通过定义字符集数字、字母实组成验证码，在利用函数表达式for循环生成6位验证码，验证码输入完成后确定提交弹出提示框。另外在此登录页面中还加入了万年历方便用户查看日期和时间。1.2课程设计目标1. 熟练使用javascript和css中的内建对象最终实现一个登录页面的雏形。2熟练使用Get函数的使用和日期函数的调用，从而方便用户查看时间。3熟练使用javascript和html实现用户登录，从而提高网页访问速度。 4能够熟练javascript，通过咨询和考察，最终确定并实验证登录。同时使用户信息更加安全。二、关键技术2.1HTML相关概念1.HTML语言HTML语言(HypertextMarkupLanguage，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。在WWW上，通常使用的发布语言是HTML，即超文本标识语言。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。如图：WWW三个组成部分 图2-1WWW的组成2.HTML文件结构 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。 HTML 文件的正文/元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。通过设立样式表，可以统一地控制HTML中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。2.3javascript 1javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。2.JavaScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。1)、JavaScript 语句插入 HTML的方式：（1)使用 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1通过定义字符集数字、字母实组成验证码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通过函数表达式for循环生成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 通过时间函数获取当前时间setInterval(timeStr=new Date().toLocaleString();timer.innerText=timeStr;,1000)3.5完成效果四、 详细设计4.1网页的用户登录界面网站的网页的用户登录界面为用户的用户名和密码输入界面，并且包含验证码如果用户验证码输入错误则显示输入错误，同样输入正确也会显示。用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网页的日历插件万年历!-/设置当前时间函数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); /日历输入函数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整除余数为零时换行 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 += ; /在超过日期数的位置上输出空格 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网页的日历插件截图图4-1网页的日历插件截图4.2网页的登录界面截图4-2网页的登录界面截图4.3网页的整体界面4.3网页的整体界面六、课设总结通过这次程序设计，我感慨颇多，首先认识到集体力量的伟大，没有集体智慧的结合，就不会有我们登录界面的运行，其次，我感觉这次课程设计不再局限于书本知识，而是让我们学以致用，是理论与实际相结合的产物。通过这次课程设计，我也感觉到自己的水平还有待提高。我们有很多灵感和创意非常好，但因为技术上的缺陷却无法更好的展示它。经常说创意大于技术，但如果没有技术的支持，再好的创意也是纸上谈兵，毫无用处。所以我们距离制造出自己想要的作品还有很长的路要走，要多学多看，领悟优秀作品的思想，启发自己的灵感，最重要的，提高技术。只有掌握了技术，自己才可以变被动为主动，制造出自己理想中的作品。在课程设计过程中，我们不断发现错误，不断改正，不断领悟，不断获取。最终的检测调试环节，本身就是在践行“过而能改，善莫大焉”的知行观。这次课程设计终于顺利完成了，在设计中遇到了很多问题，最后在老师的指导下，终于游逆而解。课程设计诚然是一门专业课，给我很多专业知识以及专业技能上的提升，同时又是一门讲道课，一门辩思课，给了我许多道，给了我很多思，给了我莫大的空间。同时，设计让我感触很深。使我对抽象的理论有了具体的认识.。我认为，在这学期的实验中，不仅培养了独立思考、动手操作的能力，在各种其它能力上也都有了提高。更重要的是，在实验课上，我们学会了很多学习的方法。而这是日后最实用的，真的是受益匪浅。七、参考文献1 刘德山JavaScript+HTML网站开发M.北京：人民邮电出版社，2012.2 郭克华JavaScript WEB网站开发M.北京：清华大学出版社，2013.3 PaulWiltonJeremyMcPeak. JavaScript从入门到经典M.北京：清华大学出版社，2010.4刘军. 精通JavascriptM.北京：清华大学出版社，2010.5 泽卡斯JavaScript高级程序设计M.北京：清华大学出版社，2013.21