js 玩一玩
闲着没事学了学js，做了一个下页面玩玩。
下面是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户娱乐系统</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>
</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<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("最多可以打开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 玩一玩的更多相关文章
- 为什么说程序员都应该玩一玩GitHub
既熟悉又陌生的GitHub 关于GitHub,相信每一个程序员都再熟悉不过了.它为开发者提供Git仓库的托管服务,是全世界最大的代码集中地,被戏称为“全球最大同性交友网站”. 但是对于很大一部分程序员 ...
- 玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...
- 一起玩转玩转LiteOS组件：TinyFrame
摘要:TinyFrame是一个简单的用于解析串口(如 UART.telnet.套接字等)通信数据帧的库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转TinyFrame>,作者:Lio ...
- 无语啊，sublime给我弄乱玩，玩坏了，而且安装插件也安装不了
国内的什么插件地址都TMMD失效了,没办法,只能翻"强"到外面找了,而且找了很多也用不了,所以收藏一个为了预防以后不行有补救的方法: 百度的99%都不行,不是报这个错就是那个错,可 ...
- 想挑战AlphaGO吗？先和PostgreSQL玩一玩?? PostgreSQL与人工智能(AI)
1月4日晚,随着古力认输,Master对人类顶尖高手的战绩停留在60胜0负1和,而令人尴尬的是这唯一一场和棋还是因为棋手掉线系统自动判和,并不是棋盘上的局势真的势均力敌了.包括聂卫平.柯洁.朴廷桓.井 ...
- 玩一玩基于Token的 自定义身份认证+权限管理
使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证用户名与密码 验证成功后,服务端会签发一个 Toke ...
- .NET Core 玩一玩 Ocelot API网关
.net 这几年国内确实不好过. 很多都选择转行.不过.net Core跨平台 开源之后 .社区的生态在慢慢建立.往好的趋势发展. 对于坚守在.NET战线的开发者来说 是个挺不错的消息. 特别是微软 ...
- 玩一玩MEAN
参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.
- 今晚，玩一玩linux上的DNS
老哥遇到的问题, 我先按正规方式操作一波. 一,安装dns服务 yum install bind bind-utils -y 二,修改/etc/named.conf文件 options { liste ...
随机推荐
- ArrayList和List主要区别 就是ArrayList类型不安全。
什么是不安全? 1:List大家都知道初始化的时候需要定义其类型,例如 List<int> listTest = new List<int>():而ArrayList,例如:A ...
- 解决Json传输中文乱码问题
1.如果是通过URL传递:----需要编码两次 var searchText = this.searchText(); searchText = encodeURI(searchText); sear ...
- nginx源码编译问题
[root@localhost nginx-1.7.4]# ./configure checking for OS + Linux 2.6.32-431.el6.x86_64 x86_64 check ...
- Java 原始数据类型
如何记住 Java 中的原始数据类型? 画了一个图方便记忆:
- 更改oracle字符集
修改oracle字符集 方法/步骤 oracle数据库的字符集更改 A.oracle server 端 字符集查询 select userenv('language') from dual 其中 ...
- 基于Prism.Windows的UWP开发备忘
以前做UWP开发都是使用MvvmLight,主要是简单易上手,同时也写了很多MvvmLight的开发系列文章: UWP开发必备以及常用知识点总结 UWP开发之Mvvmlight实践九:基于MVVM的项 ...
- MOSFET使用与H桥驱动问题
0.小叙闲言 最开始学习三极管的时候,很注重它的工作原理,后来到了实际应用,就直接把三极管或MOSFET直接当作一个开关器件使用.直到前这几天,接触到MOSFET组成的H桥驱动电路时,发现它纯当作一个 ...
- 大数据及hadoop相关知识介绍
一.大数据的基本概念 1.1什么是大数据 互联网企业是最早收集大数据的行业,最典型的代表就是Google和百度,这两个公司是做搜索引擎的,数量都非常庞大,每天都要去把互联网上的各种各样的网页信息抓取下 ...
- 老司机带你开飞机 一： mssql on linux 安装指导
通常在本机开发环境中需要搭建所有的服务,还要修改本地的hosts,实在是不胜其烦.如今有了docker,完全不用污染本地环境,且看老司机带你搭建一个asp.net core的开发环境集群.愿你走出虚拟 ...
- [uva11992]Fast Matrix Operations（多延迟标记，二维线段树，区间更新）
题目链接:https://vjudge.net/problem/UVA-11992 题意:n*m的矩阵,每次对一个子矩阵操作,有三种操作:加x,设置为x,查询.查询返回子矩阵和.最小值.最大值 n很小 ...