javascript课程设计Word格式.docx

javascript课程设计Word格式.docx

《javascript课程设计Word格式.docx》由会员分享，可在线阅读，更多相关《javascript课程设计Word格式.docx（16页珍藏版）》请在冰豆网上搜索。

在此我通过定义字符集数字、字母实组成验证码，在利用函数表达式for循环生成6位验证码，验证码输入完成后确定提交弹出提示框。

另外在此登录页面中还加入了万年历方便用户查看日期和时间。

1.2课程设计目标

1.熟练使用javascript和css中的内建对象最终实现一个登录页面的雏形。

2．熟练使用Get函数的使用和日期函数的调用，从而方便用户查看时间。

3．熟练使用javascript和html实现用户登录，从而提高网页访问速度。

4．能够熟练javascript，通过咨询和考察，最终确定并实验证登录。

同时使用户信息更加安全。

二、关键技术

2.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'

）;

2.2通过函数表达式for循环生成6位验证码

varcodeLength=6;

for（vari=0;

i<

codeLength;

i++）

{

varcharNum=Math.floor（Math.random（）*52）;

code+=codeChars[charNum];

}

if（checkCode）

checkCode.className="

code"

;

checkCode.innerHTML=code;

2.3通过输入验证码确定提交弹出提示框

functionvalidateCode（）

varinputCode=document.getElementById（"

inputCode"

）.value;

if（inputCode.length<

=0）

alert（"

请输入验证码！

"

elseif（inputCode.toUpperCase（）!

=code.toUpperCase（））

验证码输入有误！

createCode（）;

else

验证码正确！

}

2.4通过时间函数获取当前时间

<

divid="

timer"

style="

font:

11pxtahoma;

height:

10px;

>

/div>

script>

setInterval（"

timeStr=newDate（）.toLocaleString（）;

timer.innerText=timeStr;

1000）

/script>

三、详细设计

3.1网页的用户登录界面

网站的网页的用户登录界面为用户的用户名和密码输入界面，并且包含验证码如果用户验证码输入错误则显示输入错误，同样输入正确也会显示。

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

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

title>

JavaScript验证码生成代码<

/title>

metacharset="

utf-8"

/>

headrunat="

server"

<

styletype="

text/css"

.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;

12px;

#288bc4;

margin-top:

#formwrapper{

width:

410px;

margin:

150pxauto;

padding:

20px;

text-align:

border:

3pxridge;

}

/style>

scriptlanguage="

javascript"

type="

text/javascript"

varcode;

functioncreateCode（）{

code="

//验证码的长度

varcheckCode=document.getElementById（"

checkCode"

varcodeChars=newArray（0,1,2,3,4,5,6,7,8,9,

'

//所有候选组成验证码的字符，当然也可以用中文的

for（vari=0;

/head>

bodyonload="

createCode（）"

formwrapper"

>

div>

<

formid="

form1"

runat="

onsubmit="

validateCode（）"

labelfor="

Name"

margin-left:

0.5px"

用户名：

/label>

inputtype="

text"

name="

id="

size="

18"

maxlength="

30"

/>

br/>

password"

16px"

密码：

15"

请输入：

divclass="

div"

onclick="

divstyle="

margin-top:

-20px;

330px"

ahref="

#"

看不清换一张<

/a>

br/>

inputid="

Button1"

validateCode（）;

button"

value="

确定"

90px"

取消"

10px"

/form>

/body>

/html>

3.1网页的日历插件

HEAD>

TITLE>

万年历<

/TITLE>

metahttp-equiv="

Content-Language"

content="

zh-cn"

Content-Type"

text/html;

charset=utf-8"

JavaScript"

!

--

//设置当前时间函数

functionsetToday（）

{

varnow=newDate（）;

varday=now.getDate（）;

varmon