电子商务淘宝网站程序

1、实验目的使学生了解网上商店的主要作用及其与一般管理信息系统的差异， 要求学生明确网上商店设计、开发、建造过程中的主要技术热点和前沿问题。2、要求学生掌握网上商店的生命周期的基本概念， 理解网上商店分析设计和开发的各个主要阶段及其主要任务， 了解网上商店分析开发过程与一般管理信息系统的差异，了解网上商店开发过程中的人员组织及其职责。3、要求学生理解水平型网站、 垂直型网站、 综合型网站的主要特征、 作用及其核心技术。要求学生掌握网站设计的基本思路和过程。 了解电子商务网站设计常用组件， 掌握首页设计、 页面可视化设计、 网站的风格和创意设计、 网站的栏目和版块设计、网站的目录结构和链接结构确定的

2、要点。 实验原理电子商务系统的系统开发生命周期主要包括如下5个方面：（1）系统分析规划：选定商业模式，确定商业目标、系统功能及信息需求（2）系统设计：逻辑设计与物理设计（3）系统开发：企业内部开发与系统外包（4）系统实施：一项复杂的系统工程（5）系统运行/维护：保证系统正常运行一个一般的网站的设计思路与过程为：1、客户需求分析2、网站表现形式分析：1） 网站整体风格：2) 网页设计理念：3） 网站配色方案4) 网站构架3、网站功能设计1） 前台功能设计2） 后台模块功能设计实验内容主页代码无标题文档 /图片滚动列表 mengjia 070927 var Speed_1 = 10; /速度(毫秒

3、) 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.getElement

4、ById(+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=setInterv

5、al(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(I

6、SL_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).scrollLef

7、t-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_1TempSp

8、ace)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); GetOb

9、j(ISL_Cont_1).onmouseover=function()clearInterval(AutoPlayObj_1) GetObj(ISL_Cont_1).onmouseout=function()AutoPlay_1() AutoPlay_1(); /产品展示滚动图片结束 /- 常大发饰官方旗舰店 甩卖包邮 首页 新品 网络精品 奥地利水钻 奥地利水晶 野性豹纹 购物须知 盘发教程 抢购 抢购 抢购 商品1网页代码无标题文档 常大发饰官方旗舰店 首页 新品 网络精品 奥地利水钻 奥地利水晶 野性豹纹 购物须知 盘发教程 .img_warp width:318px; _height

10、: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 objI

11、d = 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.appen

12、dChild(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

13、 = 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.posit

14、ion = 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

15、 & 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.d

16、ocumentElement.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 = absol

17、utePos(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.

18、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.cli

19、entWidth + 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

20、 = 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

21、.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

22、); 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

23、 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.clientHeight - h) : y; clip.style.clip = rect( + (y - h) + px, + (x + w) + px, + (y + h) + px, + (x - w) + px); showExpand(x

24、- w,y - h,e); warp.onmouseover = cover.onmouseover = clip.onmouseover = function() /如果清除的定时器存在,则删除. if(closeTimeId) clearTimeout(closeTimeId); closeTimeId = null; if(cover.style.visibility = hidden) cover.style.visibility = visible; if(expand & expand.style.display = none) expand.style.display = blo

25、ck; warp.onmouseout = function() /延迟一定时间后清除 closeTimeId = setTimeout(function() cover.style.visibility = hidden; if(!opts.expand) | (!opts.expand.id) expand.style.display = none; ,130); return clear:function() /在这里清除放大镜效果 warp.removeChild(clip); warp.removeChild(cover); warp.onmouseout = null; if(!o

26、pts.expand) | (!opts.expand.id) expand.style.display = none; $E(berviary:currentPic1,expand:id:expand,style:,clip:width:50px,height:50px,opacity:0.2); 商品2网页代码无标题文档 常大发饰官方旗舰店 首页 新品 网络精品 奥地利水钻 奥地利水晶 野性豹纹 购物须知 盘发教程 .img_warp width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0p

27、x;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 beIm

28、g,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.styl

29、e.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 =

30、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 = 0p

31、x; 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

32、.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.scrollTo

33、p : 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(clipWid

34、th) / 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.s

35、tyle.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 * pa

36、rseFloat(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

37、.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; expIm

38、g.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

39、.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)

40、/ 2; x = (x w)?w:x; y = (y warp.clientWidth - w) ? (warp.clientWidth - w) : x; y = (y warp.clientHeight - h) ? (warp.clientHeight - h) : y; clip.style.clip = rect( + (y - h) + px, + (x + w) + px, + (y + h) + px, + (x - w) + px); showExpand(x - w,y - h,e); warp.onmouseover = cover.onmouseover = clip.

41、onmouseover = function() /如果清除的定时器存在,则删除. if(closeTimeId) clearTimeout(closeTimeId); closeTimeId = null; if(cover.style.visibility = hidden) cover.style.visibility = visible; if(expand & expand.style.display = none) expand.style.display = block; warp.onmouseout = function() /延迟一定时间后清除 closeTimeId =

42、setTimeout(function() cover.style.visibility = hidden; if(!opts.expand) | (!opts.expand.id) expand.style.display = none; ,130); return clear:function() /在这里清除放大镜效果 warp.removeChild(clip); warp.removeChild(cover); warp.onmouseout = null; if(!opts.expand) | (!opts.expand.id) expand.style.display = non

43、e; $E(berviary:currentPic1,expand:id:expand,style:,clip:width:50px,height:50px,opacity:0.2); 注册网页代码 常大发饰官方旗舰店 (*号处为必填项) 姓名:* 密码: * 简介: 城市: 厦门 泉州 三明 福州 登陆网页代码无标题文档 常大发饰官方旗舰店 account : password: 特效图片切换 /图片滚动列表 mengjia 070927 var Speed_1 = 10; /速度(毫秒) var Space_1 = 40; /每次移动(px) var PageWidth_1 = 116 *

44、 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)

45、 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

46、(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=Pa

47、geWidth_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).scro

48、llLeft+=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;Com

49、p_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(Aut

50、oPlayObj_1) GetObj(ISL_Cont_1).onmouseout=function()AutoPlay_1() AutoPlay_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; lef

51、t: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; /图片放大倍数,根据裁剪框和

52、放大后图片容器的大小自动调整 /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) |

53、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) |

54、 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.st

55、yle.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 + (d

56、ocument.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

57、.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.expan

58、d.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; e

59、xpand.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.st

60、yle.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.pos