Partagez un exemple js que j'ai réalisé

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

下面是html代码：

 

用户娱乐系统

☻

✉

➯

美眉,你好！

▲

设置

资料

退出

游戏会员 ▲

开通会员

续费会员

会员福利

我的钱包 ▲

余额查询

余额充值

余额提现

开始游戏 ▲

点击开始

游戏设定

邀请好友

近期战绩 ▲

战绩查询

游戏截图

近期视频

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

 

之后呢加个css：

.box{ width: 100%; hauteur : 1000px ; border-bottom : #228560 solid 1px;}
.logo{ width : 100 % ; hauteur : 55px ; bordure inférieure : #228560 solide 3px ; couleur d'arrière-plan : #28a176 ; padding-top : 15px;}
.biaozhi{ width : 300px; hauteur : 35px ; arrière-plan : url(../img/tu.png) sans répétition ; marge gauche : 50 px ; aligner le texte : à droite ; couleur : vertjaune ; taille de police : 30 px ; float : gauche ;}
.you{ width : 150px ; hauteur : 35px ; flotter : à droite ; margin-right : 50px;}
.more{ width : 50px; hauteur : 35px ; flotteur : gauche ; taille de police : 25 px ; alignement du texte : centre ; couleur : blanc ;🎜>.more:hover{ width : 50px ; hauteur : 35px ; flotteur : gauche ; taille de police : 25 px ; alignement du texte : centre ; couleur : vertjaune ; curseur : pointeur;}
.banner{largeur : 100 % ; hauteur : 584 px ; clear : les deux ;}
.daohang{ width : 26,3 % ; hauteur : 930px ; bordure droite : #d1d1d1 solide 1px ; float : gauche;}
.tou{ width : 350px ; hauteur : 180px ; bordure inférieure : #228560 solide 1px ; arrière-plan : url(../img/3.png); padding-top : 20px;}
.xiang{largeur : 80px; hauteur : 80px ; marge gauche : 20 px ; arrière-plan : url(../img/xiang.png);}
.nihao{ largeur : 350 px ; hauteur : 35px ; marge supérieure : 65 px ; couleur de fond : noir ; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
.nihao:hover{ width: 350px; hauteur : 35px ; marge supérieure : 65 px ; couleur d'arrière-plan : #024c1e ; filtre:alpha(Opacité=70);-moz-opacité:0,7;opacité : 0,7; curseur : pointeur;}
.ni{ largeur : 150 px ; hauteur : 27px ; flotteur : gauche ; couleur : #fff ; alignement du texte : centre ; taille de police : 20 px ; margin-top : 8px;}
.xia{ width : 70px; hauteur : 27px ; flotter : à droite ; couleur : #fff ; alignement du texte : centre ; taille de police : 20 px ; margin-top : 8px;}
.jiao{ width : 350px; hauteur : 719px;}
.yue{largeur : 350px; hauteur : 35px ; couleur : gris foncé ;text-align : center;}
#cang{ width : 350px ; hauteur : 108px ; couleur d'arrière-plan : #28a176 ; display:none;}
.chang{largeur : 350px ; hauteur : 108px ; display:none;}
.xiao{largeur : 350px ; hauteur : 35px ; bordure inférieure : #f1f1f1 solide 1px ; alignement du texte : centre ; taille de police : 25 px ; couleur : #232323;}
.xiao:hover{width : 350px ; hauteur : 35px ; bordure inférieure : #f1f1f1 solide 1px ; alignement du texte : centre ; taille de police : 25 px ; couleur : #232323 ; couleur d'arrière-plan : jaune-vert;curseur : pointeur;}
.yice{ width : 73,6 % ; hauteur : 930px ; float : droite;}
.biaoti{ width : 100 % ; hauteur : 52px ; couleur d'arrière-plan : #28a176;}
.heng{largeur : 120 px ; hauteur : 42px ; flotteur : gauche ; alignement du texte : centre ; couleur : blanc ; taille de police : 25 px ; poids de la police : plus gras ; marge supérieure : 10 px ; border-bottom : #fff solid 2px;cursor : pointer;}
.zhuyao{ width : 100 % ; hauteur : 870px ; clair : les deux ; couleur d'arrière-plan : bleu bleuet ;🎜>
在之后搞个jqery库 外加一个自己写的js：

var xiakai = 1;
function xia(){
if(xiakai == 1){
$("#xia").html("▼");
$( "#cang").slideDown("lent");
xiakai = 2;
}else{

$("#cang").slideUp("lent");
xiakai = 1;
$("#xia").html("▲");
}
>
var xiaakai = 1;
fonction xiaa(){
si (xiaakai ==1){
$("#hui").html("游戏会员 ▼");
$("#huicang").slideDown("lent");
xiaakai = 2;
$("#hui").css({ "background": "#00fef5" });
}else{
$("#hui").html("游戏会员 ▲ ");
$("#huicang").slideUp("lent");
xiaakai = 1;
$("#hui").css({ "background": "white" } )( "我的钱包 ▼");
$("#qiancang").slideDown("lent");
xiabkai = 2;
$("#qian").css({ "background" : "#00fef5" });
}else{
$("#qian").html("我的钱包 ▲");
$("#qiancang").slideUp("lent ");
xiabkai = 1;
$("#qian").css({ "background": "white" });
}
>
var xiackai = 1;
fonction xiac(){
if(xiackai ==1){
$("#kai").html("开始游戏 ▼");
$("#youcang"). slideDown("lent");
xiackai = 2;
$("#kai").css({ "background": "#00fef5" });
}else{
$( "#kai").html("开始游戏 ▲");
$("#youcang").slideUp("lent");
xiackai = 1;
$("#kai") .css({ "background": "white" });
}
}
var xiadkai = 1;
function xiad(){
if(xiackai ==1){
$("#jin").html("近期战绩 ▼");
$("#jincang").slideDown("lent");
xiackai = 2;
$(" #jin").css({ "background": "#00fef5" });
}else{
$("#jin").html("近期战绩 ▲");
$( "#jincang").slideUp("lent");
xiackai = 1;
$("#jin").css({ "background": "white" });
}
}
var zz = "";
fonction zong1(){
zz = "开通会员";
dadajuan();
};

function zong2(){
zz = "Renouvellement d'adhésion";
dadajuan();
>
function zong3(){
zz = "Avantages membres";
dadajuan();
>
fonction zong4(){
zz = "Enquête de solde";
dadajuan();
}
fonction zong5(){
zz = "Recharge du solde";
dadajuan();
}
fonction zong6(){
zz = "Retrait du solde";
dadajuan();
>
fonction zong7 (){
zz = "Cliquez pour démarrer";
dadajuan();
}
function zong8(){
zz= "Paramètres du jeu";
dadajuan();
}
fonction zong9(){
zz = "Inviter des amis";
dadajuan();
>
fonction zong10(){
zz = "Enregistrer la requête" ;
dadajuan();
}
function zong11(){
zz = "Capture d'écran du jeu";
dadajuan();
}
function zong12(){
zz = "Vidéo récente";
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){
cas 0 :
$("#z0" ).html(zz);
$("#z0").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 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;
cas 3 :
$("#z3").html(zz);
$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 4 :
$("#z4").html(zz);
$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 5 :
$("#z5").html(zz);
$("#z5").css({ "border-bottom " : "sandybrown solid 2px" });
break;
cas 6 :
$("#z6").html(zz);
$("#z6").css( { "border-bottom" : "sandybrown solid 2px" });
break;
cas 7 :
$("#z7").html(zz);
$("#z7 ").css({ "border-bottom" : "sandybrown solid 2px" });
break;
default:
alert("Jusqu'à 8 fenêtres peuvent être ouvertes ! ! ! ");
i--;
}
}else{
bianse();
switch(x){
case 0 :
$("#z0" ).css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 1 :
$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 2 :
$("#z2").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 3 :
$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 4 :
$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 5 :
$("#z5").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 6 :
$("#z6").css({ "border-bottom" : "sandybrown solid 2px" });
break;
cas 7 :
$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });
break;
default :
alert("Jusqu'à 8 fenêtres peuvent être ouvertes !!!");
}
i--;
}
i++;
}else{
alert ("Jusqu'à 8 fenêtres peuvent être ouvertes !!!");
}

}
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" });
}
fonction 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" : " sandbrown solid 2px" });
}
function nibange(){
alert("我最腻害！！");
}

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!