JavaScript jQuery课程设计剖析.docx
《JavaScript jQuery课程设计剖析.docx》由会员分享,可在线阅读,更多相关《JavaScript jQuery课程设计剖析.docx(24页珍藏版)》请在冰豆网上搜索。
JavaScriptjQuery课程设计剖析
JavaScript+jQuery开发框架课程设计
题目基于javascript的用户登录
院(系)信息工程学院
专业班级14级计算机应用技术2班
学生姓名丁文彬
学号**********
设计地点新华学院教13
指导教师陈洋
起止时间:
2016年5月30日至2016年6月5日
一、前言
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文档的标题。与之间的内容将显示在浏览器窗口的标题栏。HTML文件的正文//
元素表明是HTML文档的主体部分。
在
与之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。
元素:
是HTML语言的基本部分。
元素总是成对出现,每一对元素一般都有一个开始的标记(如
),也有一个结束的标记(如)。
元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。
HTML元素属性:
HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。
元素属性出现在元素的<>内,并且和元素名之间有一个空格分隔;属性值用“”引起来。
2.2css
1.css简介
级联样式表(CascadingStyleSheet)简称“CSS”,它是用来进行网页风格设计。
通过设立样式表,可以统一地控制HTML中各标签的显示属性。
级联样式表可以使人更能有效地控制网页外观。
使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
2.css文件
当要在站点上所有或部份的网页上一致地应用相同样式时,可使用外部样式表。
在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。
如果人们决定更改样式,只需在外部样式表中作一次更改,而该更改会反映到所有与该样式表相链接的网页上。
通常外部样式表以.css做为文件扩展名,例如Mystyles.css。
2.3javascript
1.javascript语言
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,响应用户的各种操作。
2.JavaScript嵌入HTML文件
JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器来解释执行。
1)、JavaScript语句插入HTML的方式:
(1)使用
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:
2px3px;
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:
150pxauto;
padding:
20px;
text-align:
left;
border:
3pxridge;
}
varcode;
functioncreateCode(){
code="";
varcodeLength=6;//验证码的长度
varcheckCode=document.getElementById("checkCode");
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');//所有候选组成验证码的字符,当然也可以用中文的
for(vari=0;i{
varcharNum=Math.floor(Math.random()*52);
code+=codeChars[charNum];
}
if(checkCode)
{
checkCode.className="code";
checkCode.innerHTML=code;
}
}
functionvalidateCode()
{
varinputCode=document.getElementById("inputCode").value;
if(inputCode.length<=0)
{
alert("请输入验证码!
");
}
elseif(inputCode.toUpperCase()!
=code.toUpperCase())
{
alert("验证码输入有误!
");
createCode();
}
else
{
alert("验证码正确!
");
}
}
0.5px">用户名:
-20px;margin-left:
330px">看不清换一张
90px"/>
10px"/>