《旅游网》网页设计 实训报告Word下载.docx

1、精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3 网站规划 我的网站共有7个主页面：首页、浏览页面1、浏览页面2、详细页面、购物车、登陆页面、注册页面。每一个页面都有着自己的独特背景，以保证网站风格多样化，增加浏览者的好感。四、网站介绍一、首页：/window.onload 含义为打开页面自动页面自动执行语句。/利用getElementById方法获取元素对象/ Math.random（）函数获取随机数/ bg.src=images/bg+xh+.jpg此语句用来跟换图片，实现图片切效果。首页前端采用的幻灯片播放特效，实现特效代码如下window.onload=（se

2、tInterval（function（） var bg=document.getElementById（bg）; var xh=Math.floor（Math.random（）*5+1）; bg.src=; ,4000）;script鼠标滑过图片图特效：window.onload=function（） /打开页面时自动执行函数/用getElementById方法获取对象/用“.”号获取a 对象下所有的img对象/p.length 得到对象P 的长度/onmouseover鼠标划过时执行函数/将未滑过的鼠标的透明度改为1（不透明）/鼠标滑过的图片透明度改为0.5（半透明） var a=docum

3、ent.getElementById（xiamian var p=a.getElementsByTagName（img for（var i=0;i导航条特效： src=js/jquery.js /调用了外部JS文件，方面获取对象和元素/鼠标滑过那一项显示那个项的下一级菜单 300 是用来控制显示下级菜单的速度 时间$（function（）$（.nav）.children（li:has（ul）.hover（function（） $（this）.children（ul）.slideDown（300）; ,function（）$（this）.children（）.hide（）; ）;）;浏览页面1：

4、选项卡特效：window.onload=function（） / window.onload 打开页面时自动执行函数var a=document.getElementById（ /用 getElementById获取id号来获取对象var b=document.getElementById（chavar p=a.getElementsByTagName（input /用 getElementsByTagName获取标签获取对象var d=a.getElementsByTagName（divvar c=b.getElementsByTagName（i+） pi.index=i; /给事件对象添加

5、属性值 pi.onmouseover=function（） i+） di.style.display=none /将鼠标未滑过时的对应的div 全部隐藏起来 pi.className= this.className=bt2 dthis.index.style.display=block /将鼠标滑过时的对应的div 显示出来 c.length;i+） ci.index=i; ci.onmouseover=function（） ci.style.backgroundColor=#FFFFFF /改变鼠标未滑过时的对应元素的背景色 this.style.backgroundColor=#27B7C

6、F /改变鼠标滑过时的对应元素的背景色;图片上一张 下一张 切换特效 $（#back）.toggle（function（） /此函数是当鼠标单击#tp 对象时依次切换图片实#tp）.attr（src, images/j7.jpg 现上一张的效果/title, this.src）; , function（） images/j6.jpgimages/j5.jpgimages/j4.jpgimages/j3.jpgimages/j2.jpgimages/j1.jpg ） #ff）.toggle（function（） /此函数是当鼠标单击#tp 对象时依次切换图片实现 下一张的效果/ ）浏览页面2：当

7、鼠标滑过对应的地区时，下方会显示对应地区的景点 优惠，报价，图片等信息，并且鼠标滑到哪张图片，该图片会自动增添一个边框。特效代码：window.onload=function（）var d=document.getElementById（w /用getElementById方法获取对象var b=d.getElementsByClassName（id1 /用.getElementsByClassName方法获取d对象var p=document.getElementsByTagName（ 下的元素 / /给事件对象添加属性值 pi.onmouseover=function（） /鼠标滑过时执行

8、以下函数 bi.style.display= /将鼠标未滑过时的对应的盒子全部隐藏起来 bthis.index.style.display= /将鼠标滑过时的对应的盒子显示出来详细页面：当鼠标滑过左侧照片是 右侧显示对应景点的相关信息，包过图片 景点描述zw）.getElementsByTagName（/先用.getElementById方法获取id 号 zw的对象 在用getElementsByTagName方法获取zw对象下img 标签对象/hezi）/先用.getElementById方法获取id 号hezi的对象 在用getElementsByTagName方法获取zw对象下div标签

9、对象/for（var i=0;a.length;i+） ai.index=i; ai.onmouseover=function（）购物车页面：购物车只要包括 全选特效 ，增加、减少特效 ，结算， 计算总价特效增加数量特效function jia（） var a=document.getElementById（sl）.value; /通过getElementById（）.对象的值 var b=parseInt（a）+1; /每当点击按钮书对象的值加1 document.getElementById（）.value=b+ /将计算出了的值再付给原来的对 if（b=20） 象显示出来）.value=

10、20; /通过if 语句来判断值，从而来控制最大值减少数量特效function jian1（）sl1 /通过getElementById（ var b=parseInt（a）-1; /每当点击按钮书对象的值减1if（b=0） 象显示出来 document.getElementById（）.value=0; /通过if 语句来判断值，从而来控制最小值计算总价特效：function js（） var jiage=document.getElementById（jiage /获取id对象的值 var qx2=document.getElementsByName（xz /用getElementsByN

11、ame方法获取对象 var a1=parseInt（document.getElementById（）.value）;/获取id对象的值 var a2=parseInt（document.getElementById（ var a3=parseInt（document.getElementById（sl2 var a4=parseInt（document.getElementById（sl3 var a5=parseInt（document.getElementById（sl4 var a6=parseInt（document.getElementById（sl5 var b1=0;var b

12、2=0;var b3=0;var b4=0;var b5=0;var b6=0; var sum=0; if（qx20.checked=true） b1=a1*899; /计算第一行记录的值 elseb1=0; if（qx21.checked=true） b2=a2*1888; /计算第二行记录的值 elseb2=0; if（qx22.checked=true） b3=a3*300; /计算第三行记录的值 elseb3=0; if（qx23.checked=true） b4=a4*600; /计算第四行记录的值 elseb4=0; if（qx24.checked=true） b5=a5*209

13、4; /计算第五行记录的值 elseb5=0; if（qx25.checked=true） b6=a6*1049; /计算第六行记录的值 sum=b1+b2+b3+b4+b5+b6+ /将所有记录行的值相加求和）.value=+sum; /再将计算出来的值付给相应的 alert（结算成功！+sum）; /弹出提示对话框 对象 全选特效：function quanxuan（） var qx1=document.getElementById（qx）.对象 /通过getElementsByName对象qx2.length;i+） /利用循环语句判断是否被选中，如未被选中，就 if（qx1.checked=true） 选中该对象，一次执行从而实现全选效果/ qx2i.checked=true; else qx2i.checked=false;删除记录行功能var sc=document.getElementsByClassName（sc var tr=document.getElementsByTagName（table）0.getElementsByTagName（tbodytr for（z=0;z=4&a1.lengtha2.length=20） / 判断用户名字符是否在420之间 alert（欢迎进入新世界登录成功！ /输出提示信息 window.ope