《人机交互与界面设计——班级网站课程报告cxx.docx》由会员分享，可在线阅读，更多相关《人机交互与界面设计——班级网站课程报告cxx.docx（24页珍藏版）》请在三一文库上搜索。
1、信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：班级网站课程设计报告专业班级：大数据212班一.设计思想设计个班级网站,班级网站课设是个非常实用的项目，它可以提高学生的编程能力、团队协作能力和项目管理能力，同时也可以提供一个互动交流的平台，增强班级的凝聚力和活力。二.各个网页设计分析1.网页的结构主要分为班级网站首页，班级成员信息,班级活动展示,班级留言，登录注册界面共五大板块。2.部分网页的具体实现方法：(1)网站首页：主页设计主要以盒了的形式划分。网站首页主要由轮播图，点击图片放大效果，背景图片也调整到对应大小，设置了一个空连接，首页卜.方有班级介绍
2、，鼠标移动到相应位置时会到达卜一个页面，中间的图片之间设置了合适的间距并调整图片大小,使用了setinterva1.函数,来实时更新页面中的一个id为“time”的元素显示当前的年月日时分秒。代码：!OOCTYPEht111.tFNIa火致箱212班”Ut1.Q-212Mx.htn1.*frWohref”班维人Ui1.Bj(1.Bhtm1.班级成&SttJBJ动MfiWt(Mag8113J1.v1.(hi-1.f(xu5,p1.c1.1.stMSWkm代：9；top:。；一cigsrc-images/3.jpgN1.Mges/4.jpg*好学生一耙大字生话过得一彩而充实对火学生至关学要我们整h
3、o1.d住我力的大学ho1.d住我们的讦去年华I规划好学生活耙大，生过得影而充实对火学生至关学旻我的耍ho1.d住我们的大学ho1.d住我们的青谷年华！一卸好F1.-的大学生活活过影海充实对火孕生健关VftfJSho1.d住我们的大学ho1.d住我们的有*年华！一划好一的大学生笊生活过一而充实时火今生至关女ho1.d后我打高看ho1.d至ft们的有少年华！111.as5r,divc1.a5Srcn,班嫌介矩span更CxaxA1.1.s11hzj-pCIaSS“向hjsr大数据2124p；,-幕主任杜金龙老如的带领下.我的团结有进，朝气薛勃打菊豁版-因为耶会我M无麻改忌.因为耶经.我勿无所不徒
4、,囚为印经.我们设惧.我们的未来充*无Hr可绘.地阻且长.行IU将至：行而不泰未来可期.蚊哥梆2名.书写精澈学及.H(2)班级成员信息：班级成员信息页面主要编写J班级成员表，点击个人信息可以跳转到班级成员个人信息页面，并I1.设置了旋转效果，即点击图片旋转。代码：!OOCTYPEhtn1.ht111.ber*etaCharSSIUTF-8”三i5AfiRSSSodyfi5Iohref-Mifii5thi.htmMrtttt 11bef,:.ht.-三a;7.HJIiSifZ(fJ1.contpt ahref,sItC.jpg*班8xx ddc1.ass=dnr电话，12345这.大*都不用了吧
5、.。邪没学找班长3ahref0)学习安员xxxr电话：13579号Vt拴长了就找他sG*jjpg*三36xddC1.ess=teJnrc-Xbo电话，24681色筠生班心即他束汴询Ifigsrahrof团支书xxx ddc1.ass-*d11r电话I24688r用H任动主特人hrf(dtxmhrf-fiCttx(ddc1.ass-,d11rc-电话：009988爆织班级活动体委xxx电话，747375活动/body)OOCrvPEht111.(h1.班雅伯恩h1.N15px,ace1.1.spac1.ogM0-讣姓名Kh性,别thyh个人主页八2tr,Kt3个人主页3xbuttonxtd)学习
6、委员tdB24*itGHHcByi*1.iIf1.JcE.I1.j-：-J。3J,，、：,：,二href-,；,，.”，；：曾口i.ht111.-个人主页8WVW)ohrefb班轨!Q史页.ht111.*izfi(td体委(八d5S1.个人主页(axbutton)八body)background:ur1.(iodyarefSS三fitftc1.iM1.Ki动aohref1.1.1.uyac.hr1.-班深MAft1.H,htn1.)(3)班级活动界面：通过IranSfOnn属性来实现瞌标悬停时向用户展示更多交用效果，在图片上应用该样式，在鼠标悬停时展示图片标题或者更多图片信息。代码：Idoct
7、ypeht111.hto1.1虻】。班嫉活初我示贞珈dia-a1.11ask(position:re1.ative;width:320p;heightz1.px;ovorf1.oA：hidden;.nask：dftercontent:ttr(dtatit1.e);position:abso1.ute;MidthzieeX;1.eft:0;pdding:.7c11;text-a1.ign:engr;co1.or:Wfff;background-co1.or:rgba(46,43,39,.5);ucbkit-transition:a1.1.3scasc-in-out;trdns1.tion:a1.
8、1.3sease-in-oux;opacity:8;.11ak:hoveropacity:1;-uebk1.t-transfor:trans1.te(O,-1.e%);transfmztrans1.tc(-10X);)41vi.htn1.自P1.C1.Xahrefe泰人而htnr班级成员axUahref三51”班级dJBaaahrcf”用改再动找小页面.htm1.)班母m动ahrf-1.iuyan.tfohref*,t1.1.htn1.Hdxv.CIvc1.ss三ask,Oata-tit1.edivC1.ass=FaskdtHt1.u探场动f1.vi11gsrdivc1.assJgsITdSt
9、1.t1.A.上it中1.rtsr，Sc1.03二gSIdtit1.=(4)班级留If班级留言主要设置个谣言板，可以通过留言板留言，主要是由js实现：设置一个数组，使用for循环的方法实现效果.代码：Onetacharset*eUTF-8,J级黄，天面odySNiwneade如frWahref三JA汉人员W 1.ixahref-.hB精冰AXA1g1ff1.ft-butto11-id-btns,va1.uQ-,ionc1.1.c1.c-,Show();*divc1.as三,*SbM) (5)登录注册界面该界面包括一个登录，一个注册，还有点击图片旋转效果。代码：！DOCTYPEht11
10、1.hea-ttcss,ad1.,F1.”/buttonwidth:px;height:20p;bodyM0i丽Irit员“xUabref三SESHMiM8JBax1.i)破级活劫ax/UBIi5ft1.7a次“*1加，1代读注册ft账目：uttype三,text,P1.aCehO1.dUr=iW入此“密码tahrof-*ind.hn1.ftjahrefti1.tItJ号IttP1.Xgho1.dez讥出入账号)ft:P)碓认恋叫：it!ht111.(6)主要js代码functionreturndocunent.getE1.e11entById(Id);function31.ioadEvenx
11、(fnc)varo1.don1.od三VdMoWM1.ad;if(typcofwind.o1.ood!-function)NindoW.ordgd-unc;e1.se(SMowM1.ad三function。(o1.do111.ood();unc();H好滑H方法,functj；rtveE1.etent(e1.e11entID,fina1.s,fina1.1.y,interva1.)(if(!docuent.gctE1.c11cntyId(ctID)returnfa1.se;vP1.Of1.-5ocu11ent.Pt1.cwntById(1.en)cIearTineoutte1.en.11ove
12、ment);if(Iv1.en.StyU.Uft)(e1.er.sty1.e.1.etxw;if(!.sty1.e.top)p】my10toppx;)vrXPOS=parse1.nt(e1.e11.sty1.e.1.eft);varyposp5cInt(.sty1.e.top);if(xpos-ina1.x&yos-i11a1.-y)returntrue;_if(xposfina1.-)(vrdist-Math.cei1.(pos-fira1.-x)/10);xou-os-dist;)if(yposfina1.1.y)vand1.st-Nath.c9i1.(yposfina1.1.y)/);y
13、pos-ypos-di$t;c1.c11.sty1.e.1.eft-os,px;c1.c11.sty1.e.top-ypos*,px,;vrpcat*rovoE1Cfipnt(*OIaaPnt1.D,fina1._xfina1._y,interva1.c1.c11.nvGcnt-setTimeout(repeat,interva1.);/给“电用法MIC1.aSSfunctionc1.assNorn1.(IFocusBtnIDiiFocusTxID)vaniFocustns三$(IFocusBtnID).getEIenentSSyTagNane(1ia);varIFocusTxs-S(iFoc
14、u5TxID).gctE1.cc11t5yTagNare(1.i,);or(vac16;11.FocsBtns.1.ength;I1.)iFocustns(i).c1.assMane三,norna;iFocusTxs1J.C1.dssNdfie三norm1.,;H价位点图添H1.c1.assfunctionC1.assCurrcnt(iFocus8tnXDrIFocusTxIOfn)vIFocusBtns-S(IFocutBtnID).etE1.e1111ts8yTtE1.c11onts8yTagNarrp(1.i,);iFxusBtnsn.c1.assNae三current*;iFocusT
15、xs(n.cIassNanc-,current,;/烧得处也改变左，大国functioniFousCange()if(S(,Kocus)returnfa1.s9;11以标档界大盘7国升伶止轮指$(Ifocus).Ofwuseoverfu11t1.on()(atkcytrue)；一/双标杵HJ大盒子图H堆续鸵:搭S(ifocus,).onmouseout=function()atuokey三fa1.se(HU右边IOE小覆息图vac!Fus8tns$(,ifocus.bxn,).getEUrentsByTH11e(,11);varIist1.ength=IFocusBtns.1.ength;鼠标
16、一上去，附的大图演变,给华的小图章M1.CI“移出其他的小柑的c1x$1.FusBtns(e.Ofwouseoverfction()noveienex(,1.focus,pic1.ist,%35);C1.dssfoornd1.(,ifous.btn,i,ifc2)iFocu5Btns(1.d11cxjscovc-function。(11ovE1.11ont(ifocus-pc1.st,e,-325,5);C1.assCurrcnt(,ifocus_btn*,*ifocus-tx,1);/HEif(1.ist1.ength三3iFocusBtns2).Onncxjscovcr-function(
17、)veC1.eent(ifocusjic1.ist,e,-65瓦5);4)iFocusBtns3.onncj5covcr-function()veE10nt(ifon.s_p:c1.st,%975,5)；c1.arMoEII(TfoCU1.btV,cus-t,);1.SsCurret(ifocus-btn,ifoNtUrnfa1.se;if(atuokey)returnfa1.se;varfcusBtn1.ist$(,ifocus_btn,).gctEIcncnt5ByTagN11c(1.i,)；varMst1.ffngtb-ZocusBtn1.1st.1.ength;tor(var1三0;i
18、0,5);c)asKor111.(,ifocus,t11*,Tfocujtx);cIdssCurrent(,1.ocusbxn,1.ocus-t2);if(CurrcntMun-2&Iist1.ength!3)noveE19三nt(,ifocusapicMst,%975,5);c1.assKora1.(ifoveienent(ifot11,ifous_tx,)；c1.ssCurrent(focus-btn,ifocus-t,t0);if(CurrentHofi=三18Iist1.ength=2)noveienent(ifos_pic1.1.st,明5);c1.asXoma1.(ifocus,b
19、t11,ifous-tx,);cIassCurrentnt(,ifqcu$_pic1.i$t,&,5)；c1.a(sNo11va1.(ifocus-btn,Kocu5-t);c1.asiCurrent(,ifocus-btn,ifocus-txtO);add1.oadevent(iFtFu1.1.Year();vat-rndaxe.gex11ont()1;门门.；，varda-cte.get(ate();。山i(”vardaydtc.getDay();一；，I1.JF!,vrh-dtP.ptHors();utvr11-datc.getMinutes(;了：,van$-date.gtSeconds(;选1.varddocuwnt.gtEUnentById(ti11p);d.innerHTM1.iyear*nonWda,i,*:n:+s;).ie)/剑让对象直接量varro1.1.s三(共取id屁性为ro1.1.的财象1.ink:docuncnt.gctE1.c11entById(1.ink*a)(处一idh.ro1.1.的咐象c1.ose:docuent.getienent6y1.d(dose)./荻-id属性为ro1.1.的对配MW1.-I1.,ro1.1.:docuncnt.gctE1.c11entById(,roH),初始状-F1.ZtSH的tf1.x：e,