人机交互与界面设计——班级网站课程报告cxx.docx
信息工程学院课程设计报告（2022-2023学年第二学期）课程：人机交互与界面设计题目：班级网站课程设计报告专业班级：大数据212班一.设计思想设计个班级网站,班级网站课设是个非常实用的项目，它可以提高学生的编程能力、团队协作能力和项目管理能力，同时也可以提供一个互动交流的平台，增强班级的凝聚力和活力。二.各个网页设计分析1.网页的结构主要分为班级网站首页，班级成员信息,班级活动展示,班级留言，登录注册界面共五大板块。2.部分网页的具体实现方法：(1)网站首页：主页设计主要以盒了的形式划分。网站首页主要由轮播图，点击图片放大效果，背景图片也调整到对应大小，设置了一个空连接，首页卜.方有班级介绍，鼠标移动到相应位置时会到达卜一个页面，中间的图片之间设置了合适的间距并调整图片大小,使用了setinterva1.函数,来实时更新页面中的一个id为“time”的元素显示当前的年月日时分秒。代码：!OOCTYPEht111.>t<1.><head><netcharset-,*UTF-8*>FNIa火致箱212班”Ut1.Q<1.inkhref*css/sxy1.e.css,ce1.-'Sty1.esheeftype-textcss*ned1.1.,><head><bodyid-,bodyE1.c-><d1.vc1.ass*Zt-><divid="header"><divSWhE”>-212M<d1.v><div><d1.v1.d,'nV><u1.><H><ahrf-"ind«>x.htn1.*>frW<a><H><1.1.>ohref”班维人Ui1.Bj(1.Bhtm1.>班级成&<a1.><1.i><ahrefwHtt.htn>SttJB<a><1.i><1.i><ahref"区儡动板3页面.htm1.”>J动<，/><1.i><1.i><11hr¢f-1.iuya.ht11'>Mf¾iWt'(<a><1.1.><Mahref*rhu1.Nm>¾Mag8113<11><3-”W-tie,><a><1.i><u1.><div><divid-"content"><aivc1.ass三wap><divid三-ifocus"><divid-"ifcus-pic><<J1.v1.(hi-1.f(xu5,p1.c1.1.stMSWkm代：9；top:。；一<u1.><M><ahref三-n><isrc='*iMges1.jpg>><8><1.i><11><hrf-tt><isrc-"1.mago2.jpg>><a><M><11><hr«f-Mtt->ci®gsrc-"images/3.jpg>><a><M><M><ahre*t><utsrc>N1.Mges/4.jpg*><a><><u1.><div><tfivid-MOCUJOPdi><Hv><divid=*1.focu$_tx*><u1.><1.c1.ass,*current'>好学生一耙大字生话过得一彩而充实对火学生至关学要我们整ho1.d住我力的大学ho1.d住我们的讦去年华I<1.i><1.c1.ss,*or11*>规划好学生活耙大，生过得影而充实对火学生至关学旻我的耍ho1.d住我们的大学ho1.d住我们的青谷年华！<1.i><11c1.ss-nor11a1.->一卸好F1.-的大学生活活过影海充实对火孕生健关VftfJSho1.d住我们的大学ho1.d住我们的有*年华！<1.i><1.c1.ass-,11o11>一划好一的大学生笊生活过一而充实时火今生至关女ho1.d后我打高看ho1.d至ft们的有少年华！<1.i><u1.><d1.v><d1.v><divid-"ifocus-btn><u1.><11<1.as5r,<urr><1.resrc,1.mages1.jpg*a1.x-><H><11c1.ass1.nOrm1."Xicgsrc三*inages/2.jpg"a1.t三,*><1.i><1.ic1.ss-,'norn><ingsrc«einagcs/3.jpg"a1.t*,><1.i><Mc1.as5-"norna,><1.ngsrc-1.11ags4.jpg"a1.t-w><M><U1><div><div><divc1.a5Srcn<u>,><d1.><dd><ivsrcw1.waes5dpwidth-454mheight."346-c1.ass三"renM1.*><<Jd><d1.><v><div><d1.vc1.ass-c1.erxd1.v><divc1.as-*h,><divC1.aSSrr><spn>班嫌介矩"span><ahre1.>更C>xaxA1.1.s<d1.vc1.ss"rc-><i11gsrc-i11ge5hf.jpg,c1.ass11hc1.11g,><divc1.a5s->11hzj-><pCIaSS“向hjsr大数据2124p<c1.ss三-jIanjie">；,-幕主任杜金龙老如的带领下.我的团结有进，朝气薛勃打菊豁版<”>-因为耶会我M无麻改忌.因为耶经.我勿无所不徒,囚为印经.我们设惧.我们的未来充*无Hr可绘.地阻且长.行IU将至：行而不泰未来可期.蚊哥梆2名.书写精澈学及.<><div><H"<div><divc1.ass="c1.earxdiv><div><div><scripttypc"text/javascript"*src*jsjs.js,><script><body><t111.>(2)班级成员信息：班级成员信息页面主要编写J'班级成员表，点击个人信息可以跳转到班级成员个人信息页面，并I1.设置了旋转效果，即点击图片旋转。代码：!OOCTYPEhtn1.>ht111.><be<ad><r*etaCharSSIUTF-8”<tit1.e>三i5AfiRSSS<tit1.e><1.inkhrf*css/sty1.e.css*rc1.4sty1.esheet*type-text/css*mediawa1.1."><h¢*i><1.>ody><divc1.asst-><divid-"hcder*><div><d1.v1.d=''11v><u1.><1.i><ahr¢f-"ind.htn1.>fi5I<a><K><H>ohref-Mifi¾i½5thi.htm>Mrtttt<a><1.1.>< 11'bef,:.ht.-< 1.i><ahref-.ht1.->三a;7.H><H><ahrQf-"Hya.htn1.,>JIiSifZ(<a><1.i>< 1.1.><ahref»Mt1.u1.htn1.*>fJ1.<></11><u1.><div><dvid->'contpt>><01vc1.ss-dnr1.ht>><d1.>< ahref",<><i11g5rc-'1.11ag>sItC.jpg*><a>< dt><heJ>班8×xx<a><<>< ddc1.ass="dnr<w><br><br>电话，12345<br>这.大*都不用了吧.。邪没学找班长<d1.><3< ahref三"f"><1.Hgsrc三-ifiages/¢.jpe"><a><dt><ahref0)学习安员xxx<a><dt><ddc1.ass-d11rc-><t>r><br>电话：13579<br>号Vt拴长了就找他<d1.><d1.><ahrfrf-'t*><i11gsrc-,i11Agc>sG*jjpg*><a><dt><ahref三>三36××x<a><<1.t><ddC1.ess=teJnrc-Xbo<br>电话，24681<br>色筠生班心即他束汴询<dd><d1.><d1.>< ahref三"f><Ifigsr<三"Inages/111ZB.jpg*><>< dt><ahrof"团支书xxx<a><dt>< ddc1.ass-*d11r<->电话I24688<t>r>用H任动主特人<dd><d1.><<11><«hrf<t><iBgsrca*inagos*MXftrjpgN/></>(dtxmhr¢f->fiCttx×<a><<n>(ddc1.ass-,d11rc->电话：009988<br>爆织班级活动<d1.><d1.><ohr,f><igSrC*gges体会，1pe"><a><dt><<jhref=0>体委xxx<,a><dt><ddc1.ass,d11rc'>电话，747375<br>活动<dd><d1.><div><div><divc1.055*c1.cr,><div><div><div>/body)<tr1.><OOCrvPEht111.<htn1.><head>(h1.>班雅伯恩h1.<tb1.ea1.ig(v*center*border2*ce1.1.pddd1.nc>N15px,ace1.1.spac1.og»M0-><tbed><tr>讣>姓名"Kh><th>性,别"th<th><xh>yh>个人主页<八2tr,<thead><tbody><tr>K<td><td><t<1.><td>3<td><td><buttn><aref三*HI1tt,Ji1.ht1.w>个人主页3xbuttonxtd)<tr><tr><td>学习委员"td><td>B<td><td>2<W><td><butto>><ahre1.班班人员借.。贞rt.ht111.->4*i<><buttn><td><tr><tr><t<J>GHH<td><td><c<td><td>B<td><tdxbutton><ahruf="责珑人小於5!山rti.ht111.->yi*1.i<o><button><td><tr><tr><U>If1.JcE'<.td>.I1.j-：-J。3'J,，、：,：',二href-,；,，.”"，；：曾口i.ht111.->个人主页<8<"utto0><八d><tr><r><td>WVW<td><td><td><td>)<td><td><btto11>ohrefb班轨!Q史页.ht111.*>izfi<a><bton><td><tr><tr>(td>体委(八d><td>5S<td><td>1.<td><Idxbuttonxaref-H1.：!,；.U11h.htrt1.">个人主页(axbutton)<八d><tr><tr>八body)<tab1.c><sty1.e>background:ur1.(i<0gc51.jpg);.W(background-size:IOWC1O0%;co1.rzrgb(32f22,30);font-size:23px;PZ7人0"/Hext-Oecorat1.on:none;去除林援例F划我w/co1.or：b1.ack;width:70%;height:5px;text-a1.ign:center;bckground-co1.or:Mhite;h1.tcxta1.ign:center;sty1.e><head><t>ody><divid,nav"><1.><1.i><aref<index.t三1.">SS<a><1.i><1.i><href-*WitMfnUii1.1.h.htn1.">三fitft<a><1.i>c1.i><ahrfatXift1.t1.Hhtn1.*>M1.Ki动<a<H><1.1.>ohref1.1.1.uyac.hr1.->班深MA<a><1.i><1.i><ahref="tihui.t1.->ft1.H<a><1.i><u1.><tfiv><body>,htn1.)(3)班级活动界面：通过IranSfOnn属性来实现瞌标悬停时向用户展示更多交用效果，在图片上应用该样式，在鼠标悬停时展示图片标题或者更多图片信息。代码：Idoctypeht111.>hto1.><hed><11etachrset三wUTF-8">1虻】。班嫉活初我示贞珈</“11。><1.1.nkhrf-'css/styU.css,ro1.sty】。ShwtypQ*textcss-w>dia-a1.'><head><sty1.e>.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.1.3sease-in-oux;opacity:8;.11ak:hoveropacity:1;-uebk1.t-transfor:trans1.te(O,-1.e%);transfmztrans1.tc(-10X);)<sty1.><tx:dy><divc1.ass-zt,*><41vi<1.«Nheadera><d1.v><divId=FaV><u1.><H><ahref-,*ndc>×.htn1.>>自P1.<a><1.1.>C1.Xahrefe泰人而htnr>班级成员"axU><1.i><ahref三"51”班级dJBaa<1.f><1.i><ahrcf”用改再动找小页面.htm1.)班母m动<a><1.i><H><ahr¢f-"1.iuyan.tf<a><M><1.1.>ohref*,t1.1.htn1.>>H<></11><u1.><div><divid-,contcnt*><divc1.ass-,dnrght,*><divc1.ass三*nask"d3ta-t1.t1.es"1.f1.f：iS*><1.Hg3C1.g3/团曰活动jpg"><dxv.<CIvc1.ss三¼ask,'Oata-tit1.e"<1.11gSreagC/达甫外jpg"><div><divc1.ass-11ask,'data-tit1.c*-*f：,(V*><1.ngsrciHesKJ*.jpca><d1.v><divc1.as5-11ask,'data-tit1.ewW¾W><i«gSrCggo”五美术馆.jpa><div><divC1.ass=Fask"dtHt1.u"探场"动<i11src-figcs4.jpg-><div><<f1.v<1ss*mhbscmdata-tit1.ea'ttfitt*><i11gsr<三ifiges1.*111.C.jpg,t><div><divc1.assJgsITdSt1.t1.A.上it中°<1.rtsr<1.nages.JW><div><divc1.ss,ana5k"data-titIc-Ti*.h,><1.agsrciMB9*ttS*SjpgN><<1.iv>，Sc1.03二g"'SIdtit1.='<i11gsrci11gcsd9.jpg*><d1.v><div><div><divc1.ass-,*c1.car><div><div><div><body><htn1.>(4)班级留If班级留言主要设置个谣言板，可以通过留言板留言，主要是由js实现：设置一个数组，使用for循环的方法实现效果.代码：<!00CrYPEht111.><htn1.><hd>Onetacharset*eUTF-8,<Ut1.e>J级黄，天面<tit1.e><1.inkhrcf-css/sty1.e.css-rc1.-eSty1.cshccftypc"tcxtcss*'mediaH,><scripttyp'text/javascript"src-jsjs.js,><scrip><scriptxyp»-text/jdvascr1.ptMsrc,jsnew.js*><scrit><hed><t>ody><divc】“$"z1.>SNiwneade如><divid三"nav><u1.>< H><ahref-"1.nd9×.htn1.9>frW<a><H>< 1.i><ahref三"JA汉人员<":,；贡面.htm1.*>W<a><1.i>< 1.i><ahrfcjft锻描息.MnTMMK信息x1.i>< 1.ixahref-.hB½精冰AXA1»<1.1.xaUyanms厂,班级gj"a><U>< 1.i><dhref=',tihu1.htn1.>>g1<a><1.i><u1.><div><dvid-,co11tonf><for11actions-11ethod三posfc1.ss="basic-greysty1.e=,'eht:Sepxj"><divc1.a55-hop_1.in«>"><h2>ff1.ft<span><spn><h2><divc1.ass三*hcp-1.i11e-input><textarcana11c-*,rows-*co1.%“id-con"><textarc><inputtyp>->butto11-id-btns,va1.uQ-,ionc1.1.c1.c-,Show();*><<1iv><h5xh5><divc1.as三,*SbM")<d1.v><span> <spn>(5)登录注册界面该界面包括一个登录，一个注册，还有点击图片旋转效果。代码：！DOCTYPEht111.><htn1.><hea<J><11etCharset=-UTF-8-><1.inkhzf*csy1.CSUrQ1.-rtsty1.sh9t*typ4>-ttcss,ad1.,F1.”/><sty1.e>buttonwidth:px;height:20p×<sty1.e><head>body<d1.vc1.ss2tw><divid="header"><div><dvid-"ave><u1.>< 1.i><ahref-"index.htn1.>M0i<><1.i>< 1.i><ahrf"施锻人员U9页而ht*1.*a>丽Irit员“xU< 1.1.><abref三"SESH<Bhtnr>MiM8JB<ax1.i)< 1.i><dhref三”一级括动M，Mt而htwd*>破级活劫"ax/U< 1.i><href-M1.iuyan.htn1.M>BIi5ft'1.7<a><1.i><H><a次“*1加，1<1】>代读注册</8】，><u1.><divid="contenf><divc1.as三'*dnright*'><d1.><ahref«"»"><1.11src,i11gese1.-jpg"><><dt><ahref>ft<a><dt><ddc1.ass-d11rc,><P>账目：<ir>uttype三,'text,P1.aCehO1.dUr="iW入此“'><p><P>密码t<1.putype,pssword-p1.aceho1.der-'.Vtt,j-><p><P><button><ahrof-*ind<>×.hn1.">ftj<a><button><p><d1.><d1.><ahref"t<"><i11gsrc*i11gese2.jpg*><a><dt><hrFH>i1.t<a><(Jt><ddc1.8SS="dnrc''><P>ItJ号I<Inputtyp->'t¢×t"P1.Xgho1.dez"讥出入账号)<P>ft:<inputtype"password"p1.aceho1.der*.,f,.><p>P)碓认恋叫：<inputtypes*pa$SMordNp1.aceho1.der=",y：><p><button>it!<button><P><d1.><d1.v><div><divc1.ass,c1.car'><div><botfy>ht111.>(6)主要js代码functionreturndocunent.getE1.e11entById(Id);function31.ioadEvenx(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.e<tent(e1.e11entID,fina1.s,fina1.1.y,interva1.)(if(!docu<ent.getE1.enenty1.d)returnfa1.se;if(!docu>ent.gctE1.c11cntyId(ctID)returnfa1.se;vP1.Of1.-<5ocu11ent.Pt1.c<wntById(1.<*ntID);If(e1.en.rovef>en)cIearTineoutte1.en.11ovement);if(Iv1.en.StyU.Uft)(e1.er.sty1.e.1.etxw;if(!.sty1.e.top)p】m"y10top">'px;)vrXPOS=parse1.nt(e1.e11.sty1.e.1.eft);varyposp5cInt(.sty1.e.top);if(xpos-ina1.x&&yos-i11a1.-y)returntrue;_if(xpos<fin1.-x)(vand1.st-Math.ci1.(Hn1.v×xpos)/39);xos»xosC1.st;if(XPoS>fina1.-×)(vrdist-Math.cei1.(×pos-fira1.-x)/10);xou-×os-dist;)if(ypos<fina1.1.y)vrdistMath.cei1.(fin1.-yypos)/10);yposypos+d1.sx；)if(ypos>fina1.1.y)vand1.st-Nath.c9i1.(yposfina1.1.y)/>);ypos-ypos-di$t;c1.c11.sty1.e.1.eft-×os,px"c1.c11.sty1.e.top-ypos*,px,;vr»pc>at*rovoE1Cfipnt("*OIaaPnt1.D,",fina1._xfina1._y,interva1.c1.c11.nvGcnt-setTimeout(repeat,interva1.);/给“电用法MIC1.aSSfunctionc1.assNorn1.(IFocusBtnIDiiFocusTxID)vaniFocustns三$(IFocusBtnID).getEIenentSSyTagNane('1ia);varIFocusTxs-S(iFocu5TxID).gctE1.c<c11t5yTagNare(1.i,);or(vac1»6;1<1.FocsBtns.1.ength;I1.)iFocustns(i).c1.assMane三,norna;iFocusTxs1J.C1.dssNdfie三norm1.,;H价位点图添H1.c1.assfunctionC1.assCurrcnt(iFocus8tnXDrIFocusTxIOfn)vIFocusBtns-S(IFocutBtnID).etE1.e11¢11ts8yT<agN11p(1,)；vIFocusTxs-$(iFocusTxID).gc>tE1.c11onts8yTagNarrp(1.i,);iF<xusBtnsn.c1.assNae三'current*;iFocusTxs(n.cIassNanc-,current,;/烧得处也改变左，大国functioniFo<usCange()if(S(,Kocus')returnfa1.s9;11以标档界大盘7国升伶止轮指$('Ifocus').Ofwuseover«fu11<t1.on()(atkcytrue)；一/双标杵HJ大盒子图H堆续鸵:搭S('ifocus,).onmouseout=function()atuokey三fa1.se(HU右边IOE小覆息图vac!F<us8tns$(,ifocus.bxn,).getEUrentsByTH11e(,11');varIist1.ength=IFocusBtns.1.ength;鼠标一上去，附的大图演变,给华的小图章M1.CI“移出其他的小柑的c1x$1.F<usBtns(e.Ofwouseoverfction()noveienex(,1.focus,pic1.ist',%35);C1.dssfoornd1.(,ifo<us.btn,i,ifc<us.t')ic)assCurrent('Hocu$_btn','1.focus-t×,0);UHI:瓜整电到第张阳片M.火田正阳弘啸用青为-32Spx：if(Igth>2)iFocu5Btns(1.d11>cxjscovc-function。(11ov¢E1.11ont('ifocus-pc1.st',e,-325,5);<1.assHorma1.(,ifocus-btn,ifocus-t>C1.assCurrcnt(,ifocus_btn*,*ifocus-tx',1);/HEif(1.ist1.ength>三3>iFocusBtns2).Onncxjscovcr-function()>veC1.eent(ifocusj>ic1.ist,e,-65瓦5);<1.assWoma1.(,ifocusbtn*,TfocusjxD;C1.assCurrent(,ifocuj.bt11*jYfocusJx,2);If(1.ist1.ength>4)iFocusBtns3.onncj5covcr-function()veE10<nt(ifon.s_p:c1.st,%975,5)；c1.arMoEII(TfoCU1.bt<V,cus-t,);<1.SsCurret('ifocus-btn,ifo<us-tx',3);/自动轮损set1.nterv1.('autoiFocus()',S&80);varatuokcy-fa1.se;functionautoiFocus()(奸(IS(foeU)>NtUrnfa1.se;if(atuokey)returnfa1.se;varfcusBtn1.ist$(,ifocus_btn,).gctEIcncnt5ByTagN11c(1.i,)；varMst1.ffngtb-ZocusBtn1.1st.1.ength;tor(var1三0;i<Iist1.ength;i)if(focusBtn1.isti.c1.assr4a11c-'current*)vrcurrcntXn-iH(CurrentNun-MI1.SX1.ength!1)noveienent(,Ifocuspic1.ist',-325j5);c1.assXor11a1.('ifocus-btn,ifocus-tx,);CIaSSCUrrent'Mowsjnrf,ifocus-t×,1);if(CurrentMun=三14&1.ist1.ength!=2)no"E10g11t('】fQ：UJn',6,-6>0,5);c)asKor111.(,ifocus,t11*,Tfocujtx');cIdssCurrent(,1.ocusbxn','1.÷ocus-t×2);if(CurrcntMun-2&&Iist1.ength!3)noveE19三nt(,ifocusapicMst,%975,5);c1.assKora1.('ifo<,us-bt11,);c1.assCurrent(,ifocus-btn','ifocus_tx,3);If(CurrQntNun3)(fx>veienent('ifo<uspic1.ist',0,5);c1.asstor11a1.('ifocust>t11,ifo<us_tx,)；c1.ssCurrent(focus-btn',ifocus-t×,t0);if(CurrentHofi=三18Iist1.ength=2)noveienent('ifo<s_pic1.1.st,明5);c1.asXoma1.('ifocus,bt11,ifo<us-tx,);cIassCurrent<'1.focus_btn','i÷ocus-t×,»O);if(CurrcntMun-2Igth-3)nov¢1.rx>nt(,ifqcu$_pic1.i$t,&,5)；c1.a(sNo11va1.('ifocus-btn',Kocu5-t×);c1.asiCurrent(,ifocus-btn',ifocus-tx'tO);add1.oadevent(iF<usCe);set1.nterva1.(fnction()(vrd;ItZrWyDatc();varypar-dato.g(>tFu1.1.Year();vat-r>ndaxe.gex11ont()1;门门.；，varda-c½te.get(>ate();。山i(”vardaydtc.getDay();一；，I1.JF!,vrh-dtP.ptHors();"utvr11-datc.getMinutes(>了：,van$-date.gtSeconds(>选1.varddocuwnt.gtEUnentById('ti11p');d.innerHTM1.iyear*'*non÷'W'da÷,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,
