《旅游网》网页设计 实训报告Word下载.docx
《《旅游网》网页设计 实训报告Word下载.docx》由会员分享，可在线阅读，更多相关《《旅游网》网页设计 实训报告Word下载.docx（17页珍藏版）》请在冰豆网上搜索。
精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。
3．网站规划
我的网站共有7个主页面：
首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。
每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。
四、网站介绍
一、首页：
//window.onload含义为打开
页面自动页面自动执行语句。
//利用getElementById方法获取
元素对象
//Math.random（）函数获取随机数
//bg.src="
images/bg"
+xh+"
.jpg"
此语句用来跟换图片，实现图片切效果。
首页前端采用的幻灯片播放特效，实现特效代码如下
<
scripttype="
text/javascript"
>
window.onload=（setInterval（function（）{
varbg=document.getElementById（"
bg"
）;
varxh=Math.floor（Math.random（）*5+1）;
bg.src="
;
},4000））;
script>
鼠标滑过图片图特效：
window.onload=function（）//打开页面时自动执行函数
//用getElementById方法获取对象
//用“.”号获取a对象下所有的img对象
//p.length得到对象P的长度
//onmouseover鼠标划过时执行函数
//将未滑过的鼠标的透明度改为1（不透明）
//鼠标滑过的图片透明度改为0.5（半透明）
{
vara=document.getElementById（"
xiamian"
varp=a.getElementsByTagName（"
img"
for（vari=0;
i<
p.length;
i++）
{
p[i].index=i;
//给事件对象添加属性值
p[i].onmouseover=function（）
{
for（vari=0;
p[i].style.opacity="
1"
}
this.style.opacity="
0.5"
};
}
/script>
导航条特效：
src="
js/jquery.js"
//调用了外部JS文件，方面获取对象和元素
//鼠标滑过那一项显示那个项的下一级菜单300是用来控制显示下级菜单的速度时间
$（function（）{
$（'
.nav'
）.children（"
li:
has（ul）"
）.hover（function（）{
$（this）.children（"
ul"
）.slideDown（300）;
},function（）{$（this）.children（"
）.hide（）;
）;
}）;
浏览页面1：
选项卡特效：
window.onload=function（）//window.onload打开页面时自动执行函数
vara=document.getElementById（"
//用getElementById获取id号来获取对象
varb=document.getElementById（"
cha"
varp=a.getElementsByTagName（"
input"
//用getElementsByTagName获取标签获取对象
vard=a.getElementsByTagName（"
div"
varc=b.getElementsByTagName（"
i++）{p[i].index=i;
//给事件对象添加属性值
p[i].onmouseover=function（）{
i++）{
d[i].style.display="
none"
//将鼠标未滑过时的对应的div全部隐藏起来
p[i].className="
"
this.className="
bt2"
d[this.index].style.display="
block"
//将鼠标滑过时的对应的div显示出来
}
c.length;
i++）{c[i].index=i;
c[i].onmouseover=function（）{
c[i].style.backgroundColor="
#FFFFFF"
//改变鼠标未滑过时的对应元素的背景色
this.style.backgroundColor="
#27B7CF"
//改变鼠标滑过时的对应元素的背景色
};
图片上一张下一张切换特效
$（"
#back"
）.toggle（function（）{//此函数是当鼠标单击#tp对象时依次切换图片实
#tp"
）.attr（"
src"
"
images/j7.jpg"
现上一张的效果//
title"
this.src）;
},function（）{
images/j6.jpg"
images/j5.jpg"
images/j4.jpg"
images/j3.jpg"
images/j2.jpg"
images/j1.jpg"
}）
#ff"
）.toggle（function（）{//此函数是当鼠标单击#tp对象时依次切换图片实现
下一张的效果//
}）
浏览页面2：
当鼠标滑过对应的地区时，下方会显示对应地区的景点优惠，报价，图片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。
特效代码：
window.onload=function（）
vard=document.getElementById（"
w"
//用getElementById方法获取对象
varb=d.getElementsByClassName（"
id1"
//用.getElementsByClassName方法获取d对象
varp=document.getElementsByTagName（"
下的元素//
//给事件对象添加属性值
p[i].onmouseover=function（）{//鼠标滑过时执行以下函数
b[i].style.display="
//将鼠标未滑过时的对应的盒子全部隐藏起来
b[this.index].style.display="
//将鼠标滑过时的对应的盒子显示出来
详细页面：
当鼠标滑过左侧照片是右侧显示对应景点的相关信息，包过图片景点描述
zw"
）.getElementsByTagName（"
//先用.getElementById方法获取id号zw的对象在用getElementsByTagName方法获取zw对象下img标签对象//
hezi"
）
//先用.getElementById方法获取id号hezi的对象在用getElementsByTagName方法获取zw对象下div标签对象//
for（vari=0;
a.length;
i++）{a[i].index=i;
a[i].onmouseover=function（）{
购物车页面：
购物车只要包括全选特效，增加、减少特效，结算，计算总价特效
增加数量特效
functionjia（）{
vara=document.getElementById（"
sl"
）.value;
//通过getElementById（"
）.对象的值
varb=parseInt（a）+1;
//每当点击按钮书对象的值加1
document.getElementById（"
）.value=b+"
//将计算出了的值再付给原来的对
if（b>
=20）象显示出来
）.value=20;
//通过if语句来判断值，从而来控制最大值
减少数量特效
functionjian1（）{
sl1"
//通过getElementById（"
varb=parseInt（a）-1;
//每当点击按钮书对象的值减1
if（b<
=0）象显示出来
document.getElementById（"
）.value=0;
//通过if语句来判断值，从而来控制最小值
计算总价特效：
functionjs（）{
varjiage=document.getElementById（"
jiage"
//获取id对象的值
varqx2=document.getElementsByName（"
xz"
//用getElementsByName方法获取对象
vara1=parseInt（document.getElementById（"
）.value）;
//获取id对象的值
vara2=parseInt（document.getElementById（"
vara3=parseInt（document.getElementById（"
sl2"
vara4=parseInt（document.getElementById（"
sl3"
vara5=parseInt（document.getElementById（"
sl4"
vara6=parseInt（document.getElementById（"
sl5"
varb1=0;
varb2=0;
varb3=0;
varb4=0;
varb5=0;
varb6=0;
varsum=0;
if（qx2[0].checked==true）
{b1=a1*899;
}//计算第一行记录的值
else{b1=0;
if（qx2[1].checked==true）
{b2=a2*1888;
}//计算第二行记录的值
else{b2=0;
if（qx2[2].checked==true）
{b3=a3*300;
}//计算第三行记录的值
else{b3=0;
if（qx2[3].checked==true）
{b4=a4*600;
}//计算第四行记录的值
else{b4=0;
}
if（qx2[4].checked==true）
{b5=a5*2094;
}//计算第五行记录的值
else{b5=0;
}
if（qx2[5].checked==true）
{b6=a6*1049;
}//计算第六行记录的值
sum=b1+b2+b3+b4+b5+b6+"
//将所有记录行的值相加求和
）.value="
¥
+sum;
//再将计算出来的值付给相应的
alert（"
结算成功！
+sum）;
//弹出提示对话框对象
全选特效：
functionquanxuan（）{
varqx1=document.getElementById（"
qx"
）.对象
//通过getElementsByName对象
qx2.length;
i++）{//利用循环语句判断是否被选中，如未被选中，就
if（qx1.checked==true）{选中该对象，一次执行从而实现全选效果//
qx2[i].checked=true;
else{
qx2[i].checked=false;
删除记录行功能
varsc=document.getElementsByClassName（"
sc"
vartr=document.getElementsByTagName（'
table'
）[0].getElementsByTagName（'
tbody'
tr'
for（z=0;
z<
sc.length;
z++）
sc[z].index=z;
sc[z].onclick=function（）
{
this.parentNode.parentNode.parentNode.removeChild（this.parentNode）};
}//通过寻找父标签的方法找到需要删除的记录行，将其删除
注册页面：
本张网页这样是对表单的数据判断，计算，控制，将不符合规则的值拦截在外
functionzhuce（）{
vara1=document.getElementById（"
yong"
vara2=document.getElementById（"
mima"
//获取id对象的值
vara3=document.getElementById（"
mima1"
vara4=document.getElementById（"
mima2"
vara5=document.getElementById（"
mima3"
vara6=document.getElementById（"
xy"
if（a1.length>
=4&
&
a1.length<
=20）
{if（a2.length>
a2.length<
=16）//控制用户名必须在4~20位
{if（a2==a3）//判断第二次输入的密码与第一输入的密码是否一致
{if（a4.length==11）//控制电话号码必须在11位数
{if（a5!
="
）//判断验证码是否为空
{
alert（"
用户注册成功！
+"
\n"
您的用户名：
+a1+"
您的密码为：
+a2）;
window.open（"
denglu.html"
//当用户注册成功之后自动跳到登陆界面
}
}
else{alert（"
电话号码格式错误！
}//输出提示信息
else{alert（"
密码输入不一致，请重新输入"
a3=="
}//输出提示信息
else{alert（"
密码最少4个字符，最多16字符"
}
else{alert（"
用户名最少4个字符，最多16字符"
登陆界面：
本章页面主要是对用户名和密码的格式字符进行判断，看书否符合用户名或密码要求
functiondenglu（）{
if（a2.length>
=20）//判断用户名字符是否在4~20之间
{alert（"
欢迎进入新世界"
登录成功！
//输出提示信息
window.ope
升级会员 