闲着没事学了学js,做了一个下页面玩玩。
下面是html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用户娱乐系统</title> <link rel="stylesheet" href="css/guanli.css" /> <script type="text/javascript" src="js/jqery.js" ></script> <script type="text/javascript" src="js/guanli.js" ></script> </head> <body> <div class="box"> <div class="logo"> <div class="biaozhi">用户娱乐系统</div> <div class="you"> <div class="more">☻</div> <div class="more">✉</div> <div class="more">➯</div> </div> </div> <div class="banner"> <div class="daohang"> <div class="tou"> <div class="xiang"></div> <div class="nihao" οnclick="xia()"> <div class="ni">美眉,你好!</div> <div class="xia" id="xia">▲</div> </div> </div> <div class="jiao"> <div id="cang"> <div class="xiao"> 设置 </div> <div class="xiao"> 资料 </div> <div class="xiao"> 退出 </div> </div> <div class="xiao" οnclick="xiaa()" id="hui">游戏会员 ▲</div> <div id="huicang" class="chang"> <div class="xiao" οnclick="zong1()">开通会员</div> <div class="xiao" οnclick="zong2()">续费会员</div> <div class="xiao" οnclick="zong3()">会员福利</div> </div> <div class="xiao" οnclick="xiab()" id="qian">我的钱包 ▲</div> <div id="qiancang" class="chang"> <div class="xiao" οnclick="zong4()">余额查询</div> <div class="xiao" οnclick="zong5()">余额充值</div> <div class="xiao" οnclick="zong6()">余额提现</div> </div> <div class="xiao" οnclick="xiac()" id="kai">开始游戏 ▲</div> <div id="youcang" class="chang"> <div class="xiao" οnclick="zong7()">点击开始</div> <div class="xiao" οnclick="zong8()">游戏设定</div> <div class="xiao" οnclick="zong9()">邀请好友</div> </div> <div class="xiao" οnclick="xiad()" id="jin">近期战绩 ▲</div> <div id="jincang" class="chang"> <div class="xiao" οnclick="zong10()">战绩查询</div> <div class="xiao" οnclick="zong11()">游戏截图</div> <div class="xiao" οnclick="zong12()">近期视频</div> </div> <div class="yue">本网页由洪宝制作<br/>版权声明54655-54@654-**5456</div> </div> </div> <div class="yice"> <div class="biaoti"> <div class="heng" id="z0" οnclick="wobian0()"></div> <div class="heng" id="z1" οnclick="wobian1()"></div> <div class="heng" id="z2" οnclick="wobian2()"></div> <div class="heng" id="z3" οnclick="wobian3()"></div> <div class="heng" id="z4" οnclick="wobian4()"></div> <div class="heng" id="z5" οnclick="wobian5()"></div> <div class="heng" id="z6" οnclick="wobian6()"></div> <div class="heng" id="z7" οnclick="wobian7()"></div> </div> <div class="zhuyao" id="nimama" οnclick="nibange()"></div> </div> </div> </div> </body> </html> 之后呢加个css: .box{ width: 100%; height: 1000px; border-bottom: #228560 solid 1px;} .logo{ width: 100%; height: 55px; border-bottom: #228560 solid 3px; background-color: #28a176; padding-top: 15px;} .biaozhi{ width: 300px; height: 35px; background: url(../img/tu.png) no-repeat;margin-left: 50px; text-align: right; color: greenyellow; font-size: 30px; float: left;} .you{ width: 150px; height: 35px; float: right; margin-right: 50px;} .more{ width: 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: white;} .more:hover{ width: 50px; height: 35px; float: left; font-size: 25px; text-align: center; color: greenyellow; cursor: pointer;} .banner{width: 100%; height: 584px; clear: both;} .daohang{ width: 26.3%; height: 930px; border-right: #d1d1d1 solid 1px; float: left;} .tou{ width: 350px; height: 180px; border-bottom: #228560 solid 1px; background: url(../img/3.png); padding-top: 20px;} .xiang{ width: 80px; height: 80px; margin-left: 20px; background: url(../img/xiang.png);} .nihao{ width: 350px; height: 35px; margin-top: 65px; background-color: black; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;} .nihao:hover{ width: 350px; height: 35px; margin-top: 65px; background-color: #024c1e; filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; cursor: pointer;} .ni{ width: 150px; height: 27px; float: left; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;} .xia{ width: 70px; height: 27px; float: right; color: #fff; text-align: center; font-size: 20px; margin-top: 8px;} .jiao{ width: 350px; height: 719px;} .yue{width: 350px; height: 35px; color: darkgrey;text-align: center;} #cang{ width: 350px; height: 108px; background-color: #28a176; display:none;} .chang{ width: 350px; height: 108px; display:none;} .xiao{ width: 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323;} .xiao:hover{width: 350px; height: 35px; border-bottom: #f1f1f1 solid 1px; text-align: center; font-size: 25px; color: #232323; background-color: yellowgreen;cursor: pointer;} .yice{ width: 73.6%; height: 930px; float: right;} .biaoti{ width: 100%; height: 52px; background-color: #28a176;} .heng{width: 120px; height: 42px; float: left; text-align: center; color: white; font-size: 25px; font-weight: bolder;margin-top: 10px; border-bottom: #fff solid 2px;cursor: pointer;} .zhuyao{ width: 100%; height: 870px; clear: both; background-color: cornflowerblue;} 在之后搞个jqery库 外加一个自己写的js: var xiakai = 1; function xia(){ if(xiakai == 1){ $("#xia").html("▼"); $("#cang").slideDown("slow"); xiakai = 2; }else{ $("#cang").slideUp("slow"); xiakai = 1; $("#xia").html("▲"); } } var xiaakai = 1; function xiaa(){ if(xiaakai ==1){ $("#hui").html("游戏会员 ▼"); $("#huicang").slideDown("slow"); xiaakai = 2; $("#hui").css({ "background": "#00fef5" }); }else{ $("#hui").html("游戏会员 ▲"); $("#huicang").slideUp("slow"); xiaakai = 1; $("#hui").css({ "background": "white" }); } } var xiabkai = 1; function xiab(){ if(xiabkai ==1){ $("#qian").html("我的钱包 ▼"); $("#qiancang").slideDown("slow"); xiabkai = 2; $("#qian").css({ "background": "#00fef5" }); }else{ $("#qian").html("我的钱包 ▲"); $("#qiancang").slideUp("slow"); xiabkai = 1; $("#qian").css({ "background": "white" }); } } var xiackai = 1; function xiac(){ if(xiackai ==1){ $("#kai").html("开始游戏 ▼"); $("#youcang").slideDown("slow"); xiackai = 2; $("#kai").css({ "background": "#00fef5" }); }else{ $("#kai").html("开始游戏 ▲"); $("#youcang").slideUp("slow"); xiackai = 1; $("#kai").css({ "background": "white" }); } } var xiadkai = 1; function xiad(){ if(xiackai ==1){ $("#jin").html("近期战绩 ▼"); $("#jincang").slideDown("slow"); xiackai = 2; $("#jin").css({ "background": "#00fef5" }); }else{ $("#jin").html("近期战绩 ▲"); $("#jincang").slideUp("slow"); xiackai = 1; $("#jin").css({ "background": "white" }); } } var zz = ""; function zong1(){ zz = "开通会员"; dadajuan(); }; function zong2(){ zz = "续费会员"; dadajuan(); } function zong3(){ zz = "会员福利"; dadajuan(); } function zong4(){ zz = "余额查询"; dadajuan(); } function zong5(){ zz = "余额充值"; dadajuan(); } function zong6(){ zz = "余额提现"; dadajuan(); } function zong7(){ zz = "点击开始"; dadajuan(); } function zong8(){ zz= "游戏设定"; dadajuan(); } function zong9(){ zz = "邀请好友"; dadajuan(); } function zong10(){ zz = "战绩查询"; dadajuan(); } function zong11(){ zz = "游戏截图"; dadajuan(); } function zong12(){ zz = "近期视频"; dadajuan(); } var i = 0; var shuzu = new Array(); var x = 0; function dadajuan(){ if(i<9){ shuzu[i] = zz; var kaiguan = 1; if(i!=0){ for(var j = 0;j<i;j++){ var cao = shuzu[j]; if(cao == zz){ kaiguan = 2; x = j; } } } if(kaiguan == 1){ bianse(); switch(i){ case 0: $("#z0").html(zz); $("#z0").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 1: $("#z1").html(zz); $("#z1").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 2: $("#z2").html(zz); $("#z2").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 3: $("#z3").html(zz); $("#z3").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 4: $("#z4").html(zz); $("#z4").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 5: $("#z5").html(zz); $("#z5").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 6: $("#z6").html(zz); $("#z6").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 7: $("#z7").html(zz); $("#z7").css({ "border-bottom" : "sandybrown solid 2px" }); break; default: alert("最多可以打开8个窗口!!!"); i--; } }else{ bianse(); switch(x){ case 0: $("#z0").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 1: $("#z1").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 2: $("#z2").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 3: $("#z3").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 4: $("#z4").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 5: $("#z5").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 6: $("#z6").css({ "border-bottom" : "sandybrown solid 2px" }); break; case 7: $("#z7").css({ "border-bottom" : "sandybrown solid 2px" }); break; default: alert("最多可以打开8个窗口!!!"); } i--; } i++; }else{ alert("最多可以打开8个窗口!!!"); } } function bianse(){ $("#z0").css({ "border-bottom" : "#fff solid 2px" }); $("#z1").css({ "border-bottom" : "#fff solid 2px" }); $("#z2").css({ "border-bottom" : "#fff solid 2px" }); $("#z3").css({ "border-bottom" : "#fff solid 2px" }); $("#z4").css({ "border-bottom" : "#fff solid 2px" }); $("#z5").css({ "border-bottom" : "#fff solid 2px" }); $("#z6").css({ "border-bottom" : "#fff solid 2px" }); $("#z7").css({ "border-bottom" : "#fff solid 2px" }); } function wobian0(){ bianse(); $("#z0").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian1(){ bianse(); $("#z1").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian2(){ bianse(); $("#z2").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian3(){ bianse(); $("#z3").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian4(){ bianse(); $("#z4").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian5(){ bianse(); $("#z5").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian6(){ bianse(); $("#z6").css({ "border-bottom" : "sandybrown solid 2px" }); } function wobian7(){ bianse(); $("#z7").css({ "border-bottom" : "sandybrown solid 2px" }); } function nibange(){ alert("我最腻害!!"); }
这个网页可以动了!哈哈!!!