分享一下我做的一个js实例

闲着没事学了学js，做了一个下页面玩玩。

下面是html代码：

 

用户娱乐系统

☻

✉

➯

美眉,你好！

▲

设置

资料

退出

游戏会员 ▲

开通会员

续费会员

会员福利

我的钱包 ▲

余额查询

余额充值

余额提现

开始游戏 ▲

点击开始

游戏设定

邀请好友

近期战绩 ▲

战绩查询

游戏截图

近期视频

本网页由洪宝制作
版权声明54655-54@654-**5456

 

之后呢加个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 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("我最腻害！！");
}

这个网页可以动了！哈哈！！！

以上是分享一下我做的一个js实例的详细内容。更多信息请关注PHP中文网其他相关文章！