Teilen Sie ein von mir erstelltes JS-Beispiel
Jun 26, 2017 pm 01:40 PM闲着没事学了学js，做了一个下页面玩玩。
下面是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%; Höhe: 1000px; border-bottom: #228560 solid 1px;}
.logo{ width: 100%; Höhe: 55px; border-bottom: #228560 durchgezogen 3px; Hintergrundfarbe: #28a176; padding-top: 15px;}
.biaozhi{ width: 300px; Höhe: 35px; Hintergrund: url(../img/tu.png) no-repeat;margin-left: 50px; Textausrichtung: rechts; Farbe: grüngelb; Schriftgröße: 30px; float: left;}
.you{ width: 150px; Höhe: 35px; schweben: rechts; margin-right: 50px;}
.more{ width: 50px; Höhe: 35px; schweben: links; Schriftgröße: 25px; Textausrichtung: Mitte; Farbe: weiß;}
.more:hover{ width: 50px; Höhe: 35px; schweben: links; Schriftgröße: 25px; Textausrichtung: Mitte; Farbe: grüngelb; Cursor: Zeiger;}
.banner{width: 100 %; Höhe: 584px; klar: beide;}
.daohang{ width: 26,3%; Höhe: 930px; border-right: #d1d1d1 solid 1px; float: left;}
.tou{ width: 350px; Höhe: 180px; border-bottom: #228560 durchgezogen 1px; Hintergrund: URL(../img/3.png); padding-top: 20px;}
.xiang{ width: 80px; Höhe: 80px; Rand links: 20px; Hintergrund: url(../img/xiang.png);}
.nihao{ width: 350px; Höhe: 35px; Rand oben: 65px; Hintergrundfarbe: schwarz; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
.nihao:hover{ width: 350px; Höhe: 35px; Rand oben: 65px; Hintergrundfarbe: #024c1e; filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; Cursor: Zeiger;}
.ni{ width: 150px; Höhe: 27px; schweben: links; Farbe: #fff; Textausrichtung: Mitte; Schriftgröße: 20px; margin-top: 8px;}
.xia{ width: 70px; Höhe: 27px; schweben: rechts; Farbe: #fff; Textausrichtung: Mitte; Schriftgröße: 20px; margin-top: 8px;}
.jiao{ width: 350px; Höhe: 719px;}
.yue{width: 350px; Höhe: 35px; Farbe: Dunkelgrau;Textausrichtung: Mitte;}
#cang{ Breite: 350px; Höhe: 108px; Hintergrundfarbe: #28a176; display:none;}
.chang{ width: 350px; Höhe: 108px; display:none;}
.xiao{ width: 350px; Höhe: 35px; border-bottom: #f1f1f1 solid 1px; Textausrichtung: Mitte; Schriftgröße: 25px; Farbe: #232323;}
.xiao:hover{width: 350px; Höhe: 35px; border-bottom: #f1f1f1 solid 1px; Textausrichtung: Mitte; Schriftgröße: 25px; Farbe: #232323; Hintergrundfarbe: Gelbgrün; Cursor: Zeiger; 🎜>.yice { Breite: 73,6 %; Höhe: 930px; float: right;}
.biaoti{ width: 100%; Höhe: 52px; Hintergrundfarbe: #28a176;}
.heng{width: 120px; Höhe: 42px; schweben: links; Textausrichtung: Mitte; Farbe: weiß; Schriftgröße: 25px; Schriftstärke: fetter; Rand oben: 10 Pixel; border-bottom: #fff solid 2px;cursor: pointer;}
.zhuyao{ width: 100%; Höhe: 870px; klar: beides; Hintergrundfarbe: Kornblumenblau;
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 = "Renewal Membership";
dadajuan();
}
function zong3(){
zz = "Member Benefits";
dadajuan();
}
function zong4(){
zz = "Balance Inquiry";
dadajuan();
}
function zong5(){
zz = "Balance recharge";
dadajuan();
}
function zong6(){
zz = "Balance payment";
dadajuan();
}
function zong7 (){
zz = "Zum Starten klicken";
dadajuan();
}
function zong8(){
zz= "Spieleinstellungen";
dadajuan();
}
function zong9(){
zz = "Freunde einladen";
dadajuan();
}
function zong10(){
zz = "Abfrage aufzeichnen" ;
dadajuan();
}
function zong11(){
zz = "Game Screenshot";
dadajuan();
}
function zong12(){
zz = "Recent Video";
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;
Fall 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:
warning("Bis zu 8 Fenster können geöffnet werden! ! ! ");
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:
warning("Bis zu 8 Fenster können geöffnet werden!!!");
}
i--;
}
i++;
}else{
warning („Bis zu 8 Fenster können geöffnet werden!!!“);
}
}
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" : " sunnybrown solid 2px" });
}
function nibange(){
alarm("我最腻害！！");
}
这个网页可以动了！哈哈！！！
Das obige ist der detaillierte Inhalt vonTeilen Sie ein von mir erstelltes JS-Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
So verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
So verwenden Sie insertBefore in Javascript
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
