电子商务淘宝网站程序.doc

1、 实验目的1、 使学生了解网上商店的主要作用及其与一般管理信息系统的差异， 要求学生明确网上商店设计、开发、建造过程中的主要技术热点和前沿问题。2、要求学生掌握网上商店的生命周期的基本概念， 理解网上商店分析设计和开发的各个主要阶段及其主要任务， 了解网上商店分析开发过程与一般管理信息系统的差异，了解网上商店开发过程中的人员组织及其职责。3、要求学生理解水平型网站、 垂直型网站、 综合型网站的主要特征、 作用及其核心技术。4、 要求学生掌握网站设计的基本思路和过程。 5、 了解电子商务网站设计常用组件， 掌握首页设计、 页面可视化设计、 网站的风格和创意设计、 网站的栏目和版块设计、网站的目录结构和链接结构确定的要点。 2、 实验原理电子商务系统的系统开发生命周期主要包括如下5个方面：（1）系统分析规划：选定商业模式，确定商业目标、系统功能及信息需求（2）系统设计：逻辑设计与物理设计（3）系统开发：企业内部开发与系统外包（4）系统实施：一项复杂的系统工程（5）系统运行/维护：保证系统正常运行一个一般的网站的设计思路与过程为：1、客户需求分析2、网站表现形式分析：1） 网站整体风格：2) 网页设计理念：3） 网站配色方案4) 网站构架3、网站功能设计1） 前台功能设计2） 后台模块功能设计3、 实验内容1、 主页代码无标题文档 /图片滚动列表 mengjia 070927 var Speed_1 = 10; /速度(毫秒) var Space_1 = 40; /每次移动(px) var PageWidth_1 = 116 * 3; /翻页宽度 var interval_1 = 7000; /翻页间隔 var fill_1 = 0; /整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1=right; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName)if(document.getElementById)return eval(document.getElementById(+objName+)elsereturn eval(document.all.+objName) function AutoPlay_1()clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval(ISL_GoDown_1();ISL_StopDown_1();,interval_1) function ISL_GoUp_1()if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1=left;MoveTimeObj_1=setInterval(ISL_ScrUp_1();,Speed_1); function ISL_StopUp_1()if(MoveWay_1 = right)return;clearInterval(MoveTimeObj_1);if(GetObj(ISL_Cont_1).scrollLeft-fill_1)%PageWidth_1!=0)Comp_1=fill_1-(GetObj(ISL_Cont_1).scrollLeft%PageWidth_1);CompScr_1()elseMoveLock_1=false AutoPlay_1() function ISL_ScrUp_1()if(GetObj(ISL_Cont_1).scrollLeft=0?fill_1:fill_1+1)!=0)Comp_1=PageWidth_1-GetObj(ISL_Cont_1).scrollLeft%PageWidth_1+fill_1;CompScr_1()elseMoveLock_1=false AutoPlay_1() function ISL_ScrDown_1()if(GetObj(ISL_Cont_1).scrollLeft=GetObj(List1_1).scrollWidth)GetObj(ISL_Cont_1).scrollLeft=GetObj(ISL_Cont_1).scrollLeft-GetObj(List1_1).scrollWidth GetObj(ISL_Cont_1).scrollLeft+=Space_1 function CompScr_1()if(Comp_1=0)MoveLock_1=false;return var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)PageWidth_1/2)TempSpace=Math.round(Math.abs(Comp_1/Space_1);if(TempSpace1)TempSpace=1 if(Comp_10)if(Comp_1TempSpace)Comp_1-=TempSpace;num=TempSpaceelsenum=Comp_1;Comp_1=0 GetObj(ISL_Cont_1).scrollLeft+=num;setTimeout(CompScr_1(),TempSpeed) function picrun_ini() GetObj(List2_1).innerHTML=GetObj(List1_1).innerHTML; GetObj(ISL_Cont_1).scrollLeft=fill_1=0?fill_1:GetObj(List1_1).scrollWidth-Math.abs(fill_1); GetObj(ISL_Cont_1).onmouseover=function()clearInterval(AutoPlayObj_1) GetObj(ISL_Cont_1).onmouseout=function()AutoPlay_1() AutoPlay_1(); /产品展示滚动图片结束 /-     常大发饰官方旗舰店     甩卖包邮           首页 新品 网络精品 奥地利水钻 奥地利水晶 野性豹纹 购物须知 盘发教程           抢购   抢购   抢购     2、 商品1网页代码无标题文档     常大发饰官方旗舰店        首页 新品 网络精品 奥地利水钻 奥地利水晶 野性豹纹 购物须知 盘发教程   .img_warp width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px; .img_warpposition:relative;top:0px; left:0px;/*cursor:crosshair*/ .img_warp .current width:318px;height:199px var $E = function(opts) function _(objId)return (typeof objId = string)?document.getElementById(objId):objId; var beImg,expand,clip,cover,warp,expImg; var clipWidth,clipHeight; var closeTimeId = null; var mult = 1; /图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整 /init (function() beImg = _(opts.berviary); warp = beImg.parentNode; cover = document.createElement(div); warp.appendChild(cover); cover.style.position = absolute; cover.style.top = 0px; cover.style.left = 0px; cover.style.backgroundColor = #ccc; var opac = parseFloat(opts.opacity) | 0.3; cover.style.opacity = opac; cover.style.filter = Alpha(Opacity= + opac * 100 + ); cover.style.width = 100%; cover.style.height = 100%; cover.style.zIndex = 2; cover.style.visibility = hidden; clip = document.createElement(img); warp.appendChild(clip); clipWidth = (opts.clip & opts.clip.width) | 60px; clipHeight = (opts.clip & opts.clip.height) | 60px; clip.src = beImg.src; clip.className = beImg.className; clip.style.position = absolute; clip.style.top = 0px; clip.style.left = 0px; clip.style.clip = rect(0px, + clipWidth + , + clipHeight + ,0px); clip.style.backgroundColor = #ccc; clip.style.zIndex = 3; /ie里面会变态的自动设置宽度和高度 clip.removeAttribute(width); clip.removeAttribute(height); )(); function layerPos(e) if(e.layerX & e.layerY) return x:e.layerX,y:e.layerY; else return x:e.x,y:e.y; function absolutePos(e) if(e.pageX & e.pageY) return x:e.pageX,y:e.pageY; else var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft); var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop); return x:x,y:y; var showExpand = function(x,y,e) if(!expand) initExpand(); expImg.style.left = (-1 * x) * mult + px; expImg.style.top = (-1 * y ) * mult + px; if(!opts.expand) | (!opts.expand.id) var aPos = absolutePos(e); expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + px; expand.style.top = aPos.y + px; /初始化放大的div function initExpand() if(opts.expand & opts.expand.id) expand = _(opts.expand.id); else expand = document.createElement(div); if(opts.expand & opts.expand.style) for(var p in opts.expand.style) expand.stylep = opts.expand.stylep; expand.style.border = 1px solid #000; expand.style.position = absolute; expand.style.left =0; expand.style.right = 0; expand.style.display = block; document.body.appendChild(expand); if(clip.clientWidthclip.clientHeight) expand.style.width = clip.clientWidth + px; expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + px; else expand.style.height = clip.clientHeight + px; expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + px; expand.style.zIndex = 4; expand.style.overflow = hidden; if(expand.style.position != relative) & (expand.style.position != absolute) /变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 expand.style.position = relative; expand.style.left = 0; expand.style.top = 0; expImg = document.createElement(img); expImg.src = beImg.src; expImg.style.position = relative; expImg.style.left = 0px; expImg.style.top = 0px; expand.appendChild(expImg); expImg.removeAttribute(width); expImg.removeAttribute(height); /计算图片放大的倍数 var ew = expand.clientWidth; var eh = expand.clientHeight; var cw = parseFloat(clipWidth); var ch = parseFloat(clipHeight); mult = (ew/cw eh/ch) ? ew/cw : eh/ch; /调整放大图片的大小 expImg.style.width = beImg.clientWidth * mult + px; expImg.style.height = beImg.clientHeight * mult + px; cover.onmousemove = clip.onmousemove = function(e) var e = e | event; var pos = layerPos(e); var x = pos.x; var y = pos.y; /判断x和y坐标有没有超出范围 var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2; x = (x w)?w:x; y = (y warp.clientWidth - w) ? (warp.clientWidth - w) : x; y = (y warp.clientHeight - h) ? (warp.client