前端页面设计总结——曼巴商城.docx
电子与信息工程学院课程设计报告（2022-2023学年第一学期）课程：人机交互与界面设计题目：前端页面设计总结曼巴商城项目背景和目的利用HTML和CSS以及js,做出曼巴商城二.网页结构该网页由五个页面所组成，包含登录页面、曼巴商城首页、科比战靴详情页、注册页面，各个页面之间通过超链接进行相互访问。三.网页的具体操作1.曼巴商城首页参照淘宝网的特点和布局进行主体框架的建造，具体包括下拉菜单，输入搜索框，时钟的实现，轮播图的实现，登录注册的小型框架，商品展示框架。轮播图点击小圆点显示相对应的图片，点击左右按钮实现图片的转换，也同时实现了自动播放的功能，点击登录和注册会跳转到相应的页面。曼巴商城首页和js代码展示2O23/C/2721O52B分典f*/WQfr«/M19累WW*fvtwnw三wVlWmcv0/瑞你喜欢ej««0WarIMw<MMW«MB3.<script>varitems=document.querySelectorAll(".item");图片节点varpoints=document.querySelectorAll(',.point"),varleft=document.getElementByld("leftBtn");varright=document.getElementById("rightBtn");varall=document.querySelector(".wrap")varindex=0;vartime=0;封装一个清除active方法varClearActive=function()for(i=0;i<items.length;i+)itemsi.className=,item,;)Sr(J=0；j<points.length;j÷+)pointsj.className='point*;/改变active方法vargoIndex=function()clearActive();itemsindex.className=,itemactive1;PointslindexJxlassName='pointactive*)左按钮事件vargoLeft=function()if(index=0)index=4;elseindex;1golndex();)右按钮事件vargoRight=function()if(index<4)index+;)else(index=0;golndex();left.addEventListener('click',function()goLeft();time=0;/计时器跳转清零1)right.addEventListener(,click',function()goRight();time=0;)for(i=0;i<POintS.Iengthj+)pointsi.addEventListener('click',function()varpointindex=this.getAttribute(,data-index,)index=pointindex;golndex();time=0;)计时器轮播效果vartimer;functionplay()timer=setlnterval()=>time+;if(time=20)goRight();time=0;),100)lay();移入清除计时器all.onmousemove=function()(clearlnterval(timer)移出启动计时器all.Onmouseleave=function()Play0;)<script><script>constdiv=document.querySelector('.z,)const date = new Date()div.innerHTML = date.toLocaleString()SetInterVal(function () const date = new Date()div.innerHTML = date.toLocaleString(), 1000)<script>2.曼巴商城商品详情页参照淘宝网的特点和布局进行主体框架的建造，实现当鼠标滑至多个图片在 同一个图框里的功能同时也实现了数量的增加和减少功能。曼巴商城商品详情页和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*rtb 仆说卜圾<script>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)<script><script>consta=document.QuerySelectorAll(,.numli,);constc=document.querySelector(,.can,);letsrt=0if(c.innerHTML>=O)a0.addEventListener(,click,function()srt-=l;c.innerHTML=srt;)al.addEventListener(,click,function()srt=srt+l;c.innerHTML=srt;)<script>3.曼巴商城注册页面和登录页面展示四.网页具体内容1、素材选取：本次网页设计所需要的素材主要来自淘宝网页，少数界面的设计思路来自网络，框架都有自己构思完成，整体框架由自己个人完成布局。2、网页内容：网页的基本色调主要是NBA传奇巨星科比的相关元素，内容积极向上并且富有活力，该网页整体内容大致分为五个部分，包含登录页面、注册页面、曼巴商城首页、科比战靴详情页。五.计算器与小游戏的实现1.计算器计算器利用eval函数实现加减乘除运算，利用js实现了数字按钮功能和归零功能，还实现了输入规定数字显示文字和图片。计算器页面和代码展示<!DOCTYPEhtml><htmllang=z,zh-CNz,><head><metaCharSet二UTF-8><title>css侧边菜单<title><style>*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:450px;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%;<style><head><body><divCIaSS="a"><divCIaSS="b><div><divClaSS=c”><divClaSS=cl>1<div><divClaSS=c2”>2<div><divClaSS=c3>3<div><divCIaSS=c4>4<div><divClaSS=c5>5<div><divClaSS="c6”>6<div><divClaSS=c7>7<div><divCIaSS=c8”>8<div><divClaSS="c9”>9<div><divCIaSS="cl">O<div><divclassed,style=z,color:blue;z">+<div><divCIaSS=cl2style=,'color:blue;z><div><divclass=,cl3,zstyle=z'color:blue/>*<div><divCIaSS="cl4"StyIe="color:blue;“)<div>class=zzcl5<divstyle=,background-color:blue;color:white;<div><divClaSS=cl6style=z,color:blue;z,>C<div><divClaSS=cl7>(<div><divCIaSS="cl8”>)<div><div><div><script>constb=document.querySelector(,.b,);constc=document.querySelectorAl1('.cdiv,);conste=document.querySelectorAl1('.img,);letsrt=*'for(leti=0;i<c.length;1+)if(ci.innerText!=，=,)ci.addEventListener(,click,function()if(ci.innerText!=,C,)srt+=ci.innerText;b.innerHTML=srt;e
