收藏
下载资源下载资源 加入VIP,免费下载

JavaScript jQuery课程设计剖析.docx

上传人：b****4 文档编号：27491609 上传时间：2023-07-02 格式：DOCX 页数：24 大小：296.74KB
下载 相关 举报
JavaScript jQuery课程设计剖析.docx_第1页
第1页 / 共24页
JavaScript jQuery课程设计剖析.docx_第2页
第2页 / 共24页
JavaScript jQuery课程设计剖析.docx_第3页
第3页 / 共24页
JavaScript jQuery课程设计剖析.docx_第4页
第4页 / 共24页
JavaScript jQuery课程设计剖析.docx_第5页
第5页 / 共24页
点击查看更多>>
下载资源
资源描述

JavaScript jQuery课程设计剖析.docx

《JavaScript jQuery课程设计剖析.docx》由会员分享，可在线阅读，更多相关《JavaScript jQuery课程设计剖析.docx（24页珍藏版）》请在冰豆网上搜索。

JavaScript jQuery课程设计剖析.docx

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文档的标题。</p><p><title>与之间的内容将显示在浏览器窗口的标题栏。

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">用户名：


16px">密码：


请输入：

-20px;margin-left:

330px">看不清换一张


90px"/>

10px"/>

4.2网页的日历插件

万年历

--

//设置当前时间函数

functionsetToday（）

{

varnow=newDate（）;

varday=now.getDate（）;

varmonth=now.getMonth（）;

varyear=now.getYear（）;

if（year<2000）

year=year+1900;

this.focusDay=day;

document.wannianli.month.selectedIndex=month;

document.wannianli.year.value=year;

displayCalendar（month,year）;

}

//判断输入的年份是否为四位数

functionisFourDigitYear（year）

{

if（year.length!

=4）

{

alert（"请输入四位数年份"）;

document.wannianli.year.select（）;

document.wannianli.year.focus（）;

}

else

{

returntrue;

}

}

//显示从表单提交的单击查看按钮所显示的日历

functionselectDate（）

{

varyear=document.wannianli.year.value;

if（isFourDigitYear（year））

{

varday=0;

varmonth=document.wannianli.month.selectedIndex;

displayCalendar（month,year）;

}

}

//显示前一年的日历

functionsetPreviousYear（）

{

varyear=document.wannianli.year.value;

if（isFourDigitYear（year））

{

varday=0;

varmonth=document.wannianli.month.selectedIndex;

year--;

document.wannianli.year.value=year;

displayCalendar（month,year）;

}

}

//显示前一月的日历

functionsetPreviousMonth（）

{

varyear=document.wannianli.year.value;

if（isFourDigitYear（year））

{

varday=0;

varmonth=document.wannianli.month.selectedIndex;

if（month==0）

{

month=11;

if（year>1000）

{

year--;

document.wannianli.year.value=year;

}

}

else

{

month--;

}

document.wannianli.month.selectedIndex=month;

displayCalendar（month,year）;

}

}

//显示下一个月的所选年份的日历

functionsetNextMonth（）

{

varyear=document.wannianli.year.value;

if（isFourDigitYear（year））

{

varday=0;

varmonth=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）;

}

}

//显示下一年的日历

functionsetNextYear（）

{

varyear=document.wannianli.year.value;

if（isFourDigitYear（year））

{

varday=0;

varmonth=document.wannianli.month.selectedIndex;

year++;

document.wannianli.year.value=year;

displayCalendar（month,year）;

}

}

//日历输入函数

functiondisplayCalendar（month,year）

{

month=parseInt（month）;

year=parseInt（year）;

vari=0;

vardays=getDaysInMonth（month+1,year）;

varfirstOfMonth=newDate（year,month,1）;

//日期所在月份的第几天

varstartingPos=firstOfMonth.getDay（）;

days+=startingPos;

//输出日历表头、换行和虚线

document.calButtons.calPage.value="SuMoTuWeThFrSa";

document.calButtons.calPage.value+="\n---------------------";

//在月前没有日期的位置输出空格

for（i=0;i

{

if（i%7==0）

document.calButtons.calPage.value+="\n";

document.calButtons.calPage.value+="";

}

//在被7整除余数为零时换行

for（i=startingPos;i

{

if（i%7==0）document.calButtons.calPage.value+="\n";

//当日期小于10时，前面加0

if（i-startingPos+1<10）

document.calButtons.calPage.value+="0";

document.calButtons.calPage.value+=i-startingPos+1;

document.calButtons.calPage.value+="";

}

//在超过日期数的位置上输出空格

for（i=days;i<42;i++）

{

if（i%7==0）

document.calButtons.calPage.value+="\n";

document.calButtons.calPage.value+="";

}

document.wannianli.Go.focus（）;

}

functiongetDaysInMonth（month,year）

{

vardays;

if（month==1||month==3||month==5||month==7||month==8||month==10||month==12）

days=31;

elseif（month==4||month==6||month==9||month==11）

days=30;

elseif（month==2）

{

if（isLeapYear（year））

{days=29;}

else

{d

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置：首页 > 幼儿教育 > 家庭教育

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1