《旅游网》网页设计 实训报告Word下载.docx
- 文档编号:19346756
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:17
- 大小:3.30MB
《旅游网》网页设计 实训报告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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 旅游网 旅游网网页设计 实训报告 旅游 网页 设计 报告