当前位置：文档之家› JavaScript jQuery课程设计剖析

JavaScript jQuery课程设计剖析

JavaScript+jQuery 开发框架课程设计题目基于javascript的用户登录院（系）信息工程学院专业班级 14级计算机应用技术2班学生姓名丁文彬学号 1432101205设计地点新华学院教13指导教师陈洋起止时间：2016年5月30日至2016年6月5日目录一、前言------------------------------------------ 31.1课程设计思路---------------------------------- 31.2课程设计目标---------------------------------- 3二、关键技术--------------------------------------- 42.1HTML相关概念---------------------------------- 4 2.2css ------------------------------------------- 52.3javascript ------------------------------------ 6三、总体设计---------------------------------------- 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语言(Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。

用HTML编写的超文本文件称为HTML文件。

在WWW上，通常使用的发布语言是HTML，即超文本标识语言。

当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。

如图：WWW三个组成部分图2-1WWW的组成2.HTML文件结构<HTML><HEAD> <head>元素出现在文档的开头部分。

<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

<title></title> <title>元素定义HTML文档的标题。

<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

</HEAD><BODY>HTML 文件的正文//<body>元素表明是HTML文档的主体部分。

在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

</BODY></HTML>元素：是HTML语言的基本部分。

元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。

元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

HTML元素属性:HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。

元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。

2.2css1.css简介级联样式表（Cascading Style Sheet）简称“CSS”，它是用来进行网页风格设计。

通过设立样式表，可以统一地控制HTML中各标签的显示属性。

级联样式表可以使人更能有效地控制网页外观。

使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

2.css文件当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。

在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。

如果人们决定更改样式，只需在外部样式表中作一次更改，而该更改会反映到所有与该样式表相链接的网页上。

通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。

2.3javascript1．javascript语言JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，响应用户的各种操作。

2.JavaScript嵌入HTML文件JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。

1)、JavaScript 语句插入 HTML的方式：（1)使用 <SCRIPT> 标签将语句嵌入文档（2)将 JavaScript 源文件(.js)链接到 HTML 文档中2)、JavaScript 语句插入 HTML的位置：（1)body部分的JS（2)head部分的JS：当脚本被调用、事件被触发时执行，可保证在调用函数前，脚本已载入三、总体设计3.1通过定义字符集数字、字母实组成验证码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');3.2 通过函数表达式for循环生成6位验证码var codeLength = 6;for (var i = 0; i < codeLength; i++){var charNum = Math.floor(Math.random() * 52);code += codeChars[charNum];}if (checkCode){checkCode.className = "code";checkCode.innerHTML = code;}}3.3 通过输入验证码确定提交弹出提示框function validateCode(){var inputCode = document.getElementById("inputCode").value;if (inputCode.length <= 0){alert("请输入验证码！");}else if (inputCode.toUpperCase() != code.toUpperCase()){alert("验证码输入有误！");createCode();}else{alert("验证码正确！");}}3.4 通过时间函数获取当前时间<div id="timer" style="font:11px tahoma;height:10px;"> </div><script>setInterval("timeStr=newDate().toLocaleString();timer.innerText=timeStr;",1000) </script>3.5完成效果四、详细设计4.1网页的用户登录界面网站的网页的用户登录界面为用户的用户名和密码输入界面，并且包含验证码如果用户验证码输入错误则显示输入错误，同样输入正确也会显示。

用Javascript写入程序和读取程序。

登录信息主要包括用户名、密码、验证码。

<title>JavaScript验证码生成代码</title><meta charset="utf-8"/><head runat="server"><title></title><style type="text/css">.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;}</style><script language="javascript" type="text/javascript">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 += codeChars[charNum];}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("验证码正确！");}}</script></head><body onload="createCode()"><div id="formwrapper" ><div><form id="form1" runat="server" onsubmit="validateCode()"> <label for="Name" style=" margin-left:0.5px">用户名：</label><input type="text" name="Name" id="Name" size="18" maxlength="30" /><br /><div><label for="password" style=" margin-left:16px">密码：</label><input type="password" name="password" id="password" size="18" maxlength="15" /><br /><label for="password">请输入：</label><input type="text" id="inputCode" style="" /><div class="div" id="checkCode"onclick="createCode()" ></div><div style="margin-top:-20px; margin-left:330px"><a href="#" onclick="createCode()">看不清换一张</a></div><br/><input id="Button1" onclick="validateCode();"type="button" value="确定" style=" margin-left:90px" /><input id="Button1" onclick="validateCode();"type="button" value="取消" style=" margin-left:10px" /></form></div></div></body></html>4.2网页的日历插件<HTML><HEAD><TITLE>万年历</TITLE><meta http-equiv="Content-Language" content="zh-cn" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript"></script><H2>万年历</H2><TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0><FORM NAME="wannianli" onSubmit="return false;"><TR><TD COLSPAN=7><CENTER><SELECT NAME="month" onChange="selectDate()"><OPTION>一月</OPTION><OPTION>二月</OPTION><OPTION>三月</OPTION><OPTION>四月</OPTION><OPTION>五月</OPTION><OPTION>六月</OPTION><OPTION>七月</OPTION><OPTION>八月</OPTION><OPTION>九月</OPTION><OPTION>十月</OPTION><OPTION>十一月</OPTION><OPTION>十二月</OPTION></SELECT><INPUT NAME="year" TYPE=TEXT SIZE=4 MAXLENGTH=4><INPUT TYPE="button" NAME="Go" value="查看" onClick="selectDate()"> </CENTER></TD></TR></FORM><tr><td align="center"><script language="Jscript">function today(){var now=new Date();var day=now.getDate();var month=now.getMonth();var year=now.getYear();if(year<2000)year=year+1900;document.write("今天："+year+"年"+(month+1)+"月"+day+"日");}</script><script language="javascript">today();</script></td></tr><FORM name="calButtons"><TR><TD align="center"><textarea FONT="Courier" name="calPage" WRAP=no ROWS=9 COLS=22 ></textarea></td></tr><TR><TD><CENTER><p><INPUT TYPE=BUTTON NAME="previousYear" VALUE="前一年"onClick="setPreviousYear()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="前一月"onClick="setPreviousMonth()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="今天"onClick="setToday()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="后一月"onClick="setNextMonth()"><INPUT TYPE=BUTTON NAME="previousYear" VALUE="后一年"onClick="setNextYear()"></p></CENTER></TD></TR></form></TABLE></center><hr /></BODY></HTML>五、运行结果4.1网页的日历插件截图图4-1网页的日历插件截图4.2网页的登录界面截图4-2网页的登录界面截图4.3网页的整体界面4.3网页的整体界面六、课设总结通过这次程序设计，我感慨颇多，首先认识到集体力量的伟大，没有集体智慧的结合，就不会有我们登录界面的运行，其次，我感觉这次课程设计不再局限于书本知识，而是让我们学以致用，是理论与实际相结合的产物。

e商务文档

JavaScript jQuery课程设计剖析

相关文档推荐：