JavaScript+jQuery课程设计Word格式.docx
《JavaScript+jQuery课程设计Word格式.docx》由会员分享，可在线阅读，更多相关《JavaScript+jQuery课程设计Word格式.docx（24页珍藏版）》请在冰点文库上搜索。
元素定义HTML文档的标题。
之间的内容将显示在浏览器窗口的标题栏。
/HEAD>
BODY>
HTML文件的正文//<
body>
元素表明是HTML文档的主体部分。
在<
/body>
之间，通常都会有很多其它元素；
这些元素和元素属性构成HTML文档的主体部分。
/BODY>
/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）使用<
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位验证码
codeLength
6;
for
（var
i
0;
codeLength;
i++）
{
charNum
Math.floor（Math.random（）
*
52）;
code
+=
codeChars[charNum];
}
if
（checkCode）
checkCode.className
"
code"
;
checkCode.innerHTML
code;
3.3
通过输入验证码确定提交弹出提示框
function
validateCode（）
inputCode
document.getElementById（"
inputCode"
）.value;
（inputCode.length
0）
alert（"
请输入验证码！
else
（inputCode.toUpperCase（）
!
code.toUpperCase（））
验证码输入有误！
createCode（）;
else
验证码正确！
3.4通过时间函数获取当前时间
divid="
timer"
style="
font:
11pxtahoma;
height:
10px;
>
/div>
script>
setInterval（"
timeStr=newDate（）.toLocaleString（）;
timer.innerText=timeStr;
1000）
/script>
3.5完成效果
四、详细设计
4.1网页的用户登录界面
网站的网页的用户登录界面为用户的用户名和密码输入界面，并且包含验证码如果用户验证码输入错误则显示输入错误，同样输入正确也会显示。
用Javascript写入程序和读取程序。
登录信息主要包括用户名、密码、验证码。
JavaScript验证码生成代码<
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:
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="
varcodeLength=6;
//验证码的长度
varcheckCode=document.getElementById（"
checkCode"
varcodeChars=newArray（0,1,2,3,4,5,6,7,8,9,
'
'
//所有候选组成验证码的字符，当然也可以用中文的
for（vari=0;
i<
codeLength;
i++）
varcharNum=Math.floor（Math.random（）*52）;
code+=codeChars[charNum];
if（checkCode）
checkCode.className="
checkCode.innerHTML=code;
functionvalidateCode（）
varinputCode=document.getElementById（"
if（inputCode.length<
=0）
alert（"
elseif（inputCode.toUpperCase（）!
=code.toUpperCase（））
createCode（）;
else
}
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>
/html>
4.2网页的日历插件
TITLE>
万年历<
/TITLE>
metahttp-equiv="
Content-Language"
content="
zh-cn"
Content-Type"
text/html;
charset=utf-8"
JavaScript"
--
//设置当前时间函数
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）
请输入四位数年份"
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;
//显示前一年的日历
functionsetPreviousYear（）
year--;
//显示前一月的日历
functionsetPreviousMonth（）
if（month==0）
month=11;
if（year>
1000）
month--;
//显示下一个月的所选年份的日历
functionsetNextMonth（）
if（month==11）
month=0;
year++;
month++;
//显示下一年的日历
functionsetNextYear（）
//日历输入函数
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;
startingPos;
i++）
if（i%7==0）
\n"
"
//在被7整除余数为零时换行
for（i=startingPos;
i<
days;
if（i%7==0）document.calButtons.calPage.value+="
//当日期小于10时，前面加0
if（i-startingPos+1<
10）
0"
document.calButtons.calPage.value+=i-startingPos+1;
//在超过日期数的位置上输出空格
for（i=days;
i<
42;
i++）
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;
{days=2
升级会员 