javascript课程设计Word格式.docx
- 文档编号:15185107
- 上传时间:2022-10-28
- 格式:DOCX
- 页数:16
- 大小:238.54KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- javascript 课程设计
![提示](https://static.bdocx.com/images/bang_tan.gif)