Javascript期末大作业说明.pdf

Javascript 期末大作业说明期末大作业说明 （1）页面的内容及功能 网页题目：一米阳光购物网； 网页内容及功能： 头部是一个通过ps修饰制作的png图片， 导航部分用了css+div 的 标签的块化纵向排列，用 float 属性实现并排的导航显示，background 加 背景，主题部分分为三个部分，是三列模式有左边开始第一块是一个表单作为查询信息，第 二块是今日推荐用来展示最新的产品；中部第 一部分是由 js 代码编写的图片切换的播放， 接下来是一个广告位，下方是四张图片，最后一段滚动的文字 ，中部为本网站会员注册与 登录的表单界面，最下方是本网站会员积分排名；footer 部分注明了本网站的版权与信息； 在网站两端有漂浮的对联广告特效；在 header 的左下方有目前日期显示。 （2）页面中所用到的关键代码及代码说明 1、时间特效： 用来控制时间显示的样式即字体大小颜色； 12) dn=“PM“ hours=hours-12 if(hours=0) hours=12 if(minutes var ctimer; function init() if (document.all) tim2.style.left=tim1.style.posLeft; tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6; settimes(); function settimes() var time= new Date(); hours= time.getHours(); mins= time.getMinutes(); secs= time.getSeconds(); if (hours=o.scrollHeight/2) o.scrollTop = 0; else clearInterval(t); setTimeout(start,delay); setTimeout(start,delay); 此代码是定义图片切换的背景颜色，存放图片的 box 的大小和图片顺序数字的盒子 大小以及链接样式； var obj=document.getElementById; var currentAd=0; var adTimer; var baseurl=“;/图片目录 var maxinfo=18;/标题长度 var adDelay=3000;/切换时间 var controlItemId=“controlitem“;/根据自己的页面为跟踪条取 ID 前缀 var mapcolor=“#003366“;/Ad 跟踪条颜色，建议与信息栏的 a:hover 一样 var imglink=new Array(); for(i=0;iimglink.length;i+) if(imglinki2.lengthmaxinfo)imglinki3=imglinki2; else imglinki3=imglinki2.substring(0,maxinfo-3)+“.“; 将要用于图片切换的图片定义到一个数组里， for(i=0;iimglink.length;i+) var itemBox=document.createElement(); itemBox.innerHTML=“+(i+1)+“; control.appendChild(itemBox); var controlItem=obj(“control“).getElementsByTagName(“div“); function changeImg() obj(“show“).filters0.apply(); obj(“show“).src=baseurl+imglinkcurrentAd0; obj(“show“).filters0.play(); obj(“info“).innerHTML=“+imglinkcurrentAd3+“; for(i=0;icontrolItem.length;i+) controlItemi.style.backgroundColor=(i=currentAd)?mapcolor:“#666666“; currentAd+; currentAd=(currentAd=imglink.length)?0:currentAd; adTimer=setTimeout(“changeImg()“,adDelay); changeImg(); for(i=0;icontrolItem.length;i+) controlItemi.onclick=function() clearTimeout(adTimer); currentAd=parseInt(this.id.substring(this.id.length-1,this.id.length); changeImg(); obj(“info“).onmouseover=function()clearTimeout(adTimer); obj(“info“).onmouseout=function()adTimer=setTimeout(“changeImg()“,adDelay); 存放获取图片，同时放入所得数字； （3）本学期学习本门课程的收获及体会 本学期通过对 javascript 十周的学习基本掌握了一些 javascript 代码的基础知识 与基本应用，可以简单的编写一些在网页上经常用到的简单特效，可以更具自己需 要以及对 javascript 的了解改动一些简单的 javascript 代码为自己所用，对以后在网 页设计与制作中可以更好的制作出自己的作品。