Home > Developer > Web Develop

JS play a Play

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Idle nothing learned to learn JS, do a next page to play.

Here is the HTML code:

<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> User Entertainment systems </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>
<body>
<div class= "box" >
<div class= "logo" >
<div class= "Biaozhi" > User Entertainment System </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" > Meimei, Hello! </div>
<div class= "xia" id= "Xia" >▲</div>
</div>
</div>
<div class= "Jiao" >
<div id= "Cang" >
<div class= "Xiao" >
Set up
</div>
<div class= "Xiao" >
Information
</div>
<div class= "Xiao" >
Exit
</div>
</div>
<div class= "Xiao" onclick= "XIAA ()" id= "Hui" > Game member ▲</div>
<div id= "Huicang" class= "Chang" >
<div class= "Xiao" onclick= "zong1 ()" > Open member </div>
<div class= "Xiao" onclick= "zong2 ()" > Renewal member </div>
<div class= "Xiao" onclick= "Zong3 ()" > Member Benefits </div>
</div>
<div class= "Xiao" onclick= "Xiab ()" id= "Qian" > My wallet ▲</div>
<div id= "Qiancang" class= "Chang" >
<div class= "Xiao" onclick= "Zong4 ()" > Balance Enquiry </div>
<div class= "Xiao" onclick= "Zong5 ()" > Balance Recharge </div>
<div class= "Xiao" onclick= "Zong6 ()" > Balance Cash Withdrawal </div>
</div>
<div class= "Xiao" onclick= "Xiac ()" Id= "Kai" > Start Game ▲</div>
<div id= "Youcang" class= "Chang" >
<div class= "Xiao" onclick= "Zong7 ()" > Click Start </div>
<div class= "Xiao" onclick= "Zong8 ()" > Game Settings </div>
<div class= "Xiao" onclick= "Zong9 ()" > Invite Friends </div>
</div>
<div class= "Xiao" onclick= "Xiad ()" Id= "Jin" > Recent record ▲</div>
<div id= "Jincang" class= "Chang" >
<div class= "Xiao" onclick= "zong10 ()" > Record search </div>
<div class= "Xiao" onclick= "zong11 ()" > Games </div>
<div class= "Xiao" onclick= "Zong12 ()" > Recent videos </div>
</div>
<div class= "Yue" > this page by Hongbao production <br/> copyright notice [email protected]**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>

Then add a 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:poin ter;}
. 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: #232 323; 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;marg in-top:10px; Border-bottom: #fff solid 2px;cursor:pointer;}
. zhuyao{width:100%; height:870px; clear:both; background-color:cornflowerblue;}

After a jqery library and a self-written 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 ("game member");
$ ("#huicang"). Slidedown ("slow");
Xiaakai = 2;
$ ("#hui"). CSS ({"Background": "#00fef5"});
}else{
$ ("#hui"). HTML ("game member ▲");
$ ("#huicang"). Slideup ("slow");
Xiaakai = 1;
$ ("#hui"). CSS ({"Background": "White"});
}
}
var Xiabkai = 1;
function Xiab () {
if (Xiabkai ==1) {
$ ("#qian"). HTML ("my wallet");
$ ("#qiancang"). Slidedown ("slow");
Xiabkai = 2;
$ ("#qian"). CSS ({"Background": "#00fef5"});
}else{
$ ("#qian"). HTML ("My wallet ▲");
$ ("#qiancang"). Slideup ("slow");
Xiabkai = 1;
$ ("#qian"). CSS ({"Background": "White"});
}
}
var Xiackai = 1;
function Xiac () {
if (Xiackai ==1) {
$ ("#kai"). HTML ("Start Game");
$ ("#youcang"). Slidedown ("slow");
Xiackai = 2;
$ ("#kai"). CSS ({"Background": "#00fef5"});
}else{
$ ("#kai"). HTML ("Start Game ▲");
$ ("#youcang"). Slideup ("slow");
Xiackai = 1;
$ ("#kai"). CSS ({"Background": "White"});
}
}
var Xiadkai = 1;
function Xiad () {
if (Xiackai ==1) {
$ ("#jin"). HTML ("recent record");
$ ("#jincang"). Slidedown ("slow");
Xiackai = 2;
$ ("#jin"). CSS ({"Background": "#00fef5"});
}else{
$ ("#jin"). HTML ("recent record ▲");
$ ("#jincang"). Slideup ("slow");
Xiackai = 1;
$ ("#jin"). CSS ({"Background": "White"});
}
}
var zz = "";
function Zong1 () {
ZZ = "Open Member";
Dadajuan ();
};

function Zong2 () {
ZZ = "Renewal Member";
Dadajuan ();
}
function Zong3 () {
ZZ = "Member benefits";
Dadajuan ();
}
function Zong4 () {
ZZ = "Balance Query";
Dadajuan ();
}
function Zong5 () {
ZZ = "Balance Recharge";
Dadajuan ();
}
function Zong6 () {
ZZ = "Withdrawal of balance";
Dadajuan ();
}
function Zong7 () {
ZZ = "click to start";
Dadajuan ();
}
function Zong8 () {
zz= "Game Settings";
Dadajuan ();
}
function Zong9 () {
ZZ = "Invite friends";
Dadajuan ();
}
function Zong10 () {
ZZ = "Record Search";
Dadajuan ();
}
function Zong11 () {
ZZ = "Game";
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
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 ("Open up to 8 windows!!!") ");
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 ("Open up to 8 windows!!!") ");
}
i--;
}
i++;
}else{
Alert ("Open up to 8 windows!!!") ");
}

}
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 ("I am most greasy!! ");
}

This page is ready to move! Ha ha!!!

JS play a Play

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
play google play google google play google play play google play play google play google google play google play google play google play google play google play gedung play

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More