下面是html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>用户娱乐系统</title>
<link rel="stylesheet" href="css/guanli.css?1.1.11" />
<script type="text/javascript" src="js/jqery.js?1.1.11" ></script>
<script type="text/javascript" src="js/guanli.js?1.1.11" ></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" onclick="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" onclick="xiaa()" id="hui">游戏会员 ▲</div>
<div id="huicang" class="chang">
<div class="xiao" onclick="zong1()">开通会员</div>
<div class="xiao" onclick="zong2()">续费会员</div>
<div class="xiao" onclick="zong3()">会员福利</div>
</div>
<div class="xiao" onclick="xiab()" id="qian">我的钱包 ▲</div>
<div id="qiancang" class="chang">
<div class="xiao" onclick="zong4()">余额查询</div>
<div class="xiao" onclick="zong5()">余额充值</div>
<div class="xiao" onclick="zong6()">余额提现</div>
</div>
<div class="xiao" onclick="xiac()" id="kai">开始游戏 ▲</div>
<div id="youcang" class="chang">
<div class="xiao" onclick="zong7()">点击开始</div>
<div class="xiao" onclick="zong8()">游戏设定</div>
<div class="xiao" onclick="zong9()">邀请好友</div>
</div>
<div class="xiao" onclick="xiad()" id="jin">近期战绩 ▲</div>
<div id="jincang" class="chang">
<div class="xiao" onclick="zong10()">战绩查询</div>
<div class="xiao" onclick="zong11()">游戏截图</div>
<div class="xiao" onclick="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" onclick="wobian0()"></div>
<div class="heng" id="z1" onclick="wobian1()"></div>
<div class="heng" id="z2" onclick="wobian2()"></div>
<div class="heng" id="z3" onclick="wobian3()"></div>
<div class="heng" id="z4" onclick="wobian4()"></div>
<div class="heng" id="z5" onclick="wobian5()"></div>
<div class="heng" id="z6" onclick="wobian6()"></div>
<div class="heng" id="z7" onclick="wobian7()"></div>
</div>
<div class="zhuyao" id="nimama" onclick="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
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(我最腻害！！);
}
这个网页可以动了！哈哈！！！
以上就是分享一下我做的一个js实例的详细内容。