前端页面设计总结——曼巴商城.docx

《前端页面设计总结——曼巴商城.docx》由会员分享，可在线阅读，更多相关《前端页面设计总结——曼巴商城.docx（21页珍藏版）》请在优知文库上搜索。

1、电子与信息工程学院课程设计报告（2022-2023学年第一学期）课程：人机交互与界面设计题目：前端页面设计总结曼巴商城项目背景和目的利用HTML和CSS以及js,做出曼巴商城二.网页结构该网页由五个页面所组成，包含登录页面、曼巴商城首页、科比战靴详情页、注册页面，各个页面之间通过超链接进行相互访问。三.网页的具体操作1.曼巴商城首页参照淘宝网的特点和布局进行主体框架的建造，具体包括下拉菜单，输入搜索框，时钟的实现，轮播图的实现，登录注册的小型框架，商品展示框架。轮播图点击小圆点显示相对应的图片，点击左右按钮实现图片的转换，也同时实现了自动播放的功能，点击登录和注册会跳转到相应的页面。曼巴商城首

2、页和js代码展示2O23/C/2721O52B分典f*/WQfr/M19累WW*fvtwnw三wVlWmcv0/瑞你喜欢ej0WarIMwMMWMB3.varitems=document.querySelectorAll(.item);图片节点varpoints=document.querySelectorAll(,.point),varleft=document.getElementByld(leftBtn);varright=document.getElementById(rightBtn);varall=document.querySelector(.wrap)varindex=0;va

3、rtime=0;封装一个清除active方法varClearActive=function()for(i=0;iitems.length;i+)itemsi.className=,item,;)Sr(J=0；jpoints.length;j+)pointsj.className=point*;/改变active方法vargoIndex=function()clearActive();itemsindex.className=,itemactive1;PointslindexJxlassName=pointactive*)左按钮事件vargoLeft=function()if(index=0)i

4、ndex=4;elseindex;1golndex();)右按钮事件vargoRight=function()if(index4)index+;)else(index=0;golndex();left.addEventListener(click,function()goLeft();time=0;/计时器跳转清零1)right.addEventListener(,click,function()goRight();time=0;)for(i=0;itime+;if(time=20)goRight();time=0;),100)lay();移入清除计时器all.onmousemove=func

5、tion()(clearlnterval(timer)移出启动计时器all.Onmouseleave=function()Play0;)constdiv=document.querySelector(.z,)const date = new Date()div.innerHTML = date.toLocaleString()SetInterVal(function () const date = new Date()div.innerHTML = date.toLocaleString(), 1000)2.曼巴商城商品详情页参照淘宝网的特点和布局进行主体框架的建造，实现当鼠标滑至多个图片在

6、同一个图框里的功能同时也实现了数量的增加和减少功能。曼巴商城商品详情页和js代码展示Nike Kobe 4 ZK4 切两槌沿ZirR Z *J /。或晦/足M如我# /包心怎 6742.00的200n配请 警4州般当 a快辿更京处笈邺 SS国K贝详加工3*； NiyW先KotX 4 giE.uge/；：M谷为第(6为693500)洸健MW: I .!.MC 2019-JR-隹LJ X工呷.NlWIg数安 40 405 41 42 42.5 43 44 44.5 45：639693 5003R l*C 产，KOcm)M* 合S. Kobe4 不M： cob 工。然，外次黑蛇：中向y版 Ct*rt

7、b 仆说卜圾constsmall=document.querySelector(,.smal)constmiddle=document.querySelector(,.middle,)small.addEventListener(,mouseover,function(e)if(e.target.tagName=IMG,)middle.querySelector(,img,).src=e.target,src)consta=document.QuerySelectorAll(,.numli,);constc=document.querySelector(,.can,);letsrt=0if(c

8、.innerHTML=O)a0.addEventListener(,click,function()srt-=l;c.innerHTML=srt;)al.addEventListener(,click,function()srt=srt+l;c.innerHTML=srt;)3.曼巴商城注册页面和登录页面展示四.网页具体内容1、素材选取：本次网页设计所需要的素材主要来自淘宝网页，少数界面的设计思路来自网络，框架都有自己构思完成，整体框架由自己个人完成布局。2、网页内容：网页的基本色调主要是NBA传奇巨星科比的相关元素，内容积极向上并且富有活力，该网页整体内容大致分为五个部分，包含登录页面、注册

9、页面、曼巴商城首页、科比战靴详情页。五.计算器与小游戏的实现1.计算器计算器利用eval函数实现加减乘除运算，利用js实现了数字按钮功能和归零功能，还实现了输入规定数字显示文字和图片。计算器页面和代码展示css侧边菜单*cssreset*/*margin:0;padding:O;)divborder:blacksolidIpx;.awidth:400px;height:540px;margin:0auto;border-radius:20px;.bwidth:380px;height:50px;margin:auto;margin-top:IOpx;.cwidth:380px;height:4

10、50px;margin:auto;margin-top:20px;border-radius:20px;.cdivwidth:100px;height:50px;margin-left:18px;margin-top:20px;float:left;text-align:center;line-height:50px;font-size:20px;border-radius:20px;background-color:rgb(245,245,245);.cdiv:hoverbackground-color:orange;img(width:100%;height:100%;123456789O

11、+*divCIaSS=cl4StyIe=color:blue;“)class=zzcl5divstyle=,background-color:blue;color:white;C()constb=document.querySelector(,.b,);constc=document.querySelectorAl1(.cdiv,);conste=document.querySelectorAl1(.img,);letsrt=*for(leti=0;ic.length;1+)if(ci.innerText!=，=,)ci.addEventListener(,click,function()if(ci.innerText!=,C,)srt+=ci.innerText;b.innerHTML=srt;e