지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

내가 만든 js 예제를 공유하세요

零下一度
풀어 주다： 2017-06-26 13:40:03
원래의
1144명이 탐색했습니다.

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

下面是html代码：

 





用户娱乐系统










 

之后呢加个css：

.box{ 너비: 100%; 높이: 1000px; 테두리 하단: #228560 단색 1px;}
.logo{ 너비: 100%; 높이: 55px; 테두리 하단: #228560 단색 3px; 배경색: #28a176; 패딩 상단: 15px;}
.biaozhi{ 너비: 300px; 높이: 35px; 배경: url(../img/tu.png) no-repeat;margin-left: 50px; 텍스트 정렬: 오른쪽; 색상: 녹색노란색; 글꼴 크기: 30px; float: left;}
.you{ 너비: 150px; 높이: 35px; 플로트: 오른쪽; 여백 오른쪽: 50px;}
.more{ 너비: 50px; 높이: 35px; 플로트: 왼쪽; 글꼴 크기: 25px; 텍스트 정렬: 중앙; 색상: 흰색;}
.more:hover{ 너비: 50px; 높이: 35px; 플로트: 왼쪽; 글꼴 크기: 25px; 텍스트 정렬: 중앙; 색상: 녹색노란색; 커서: 포인터;}
.banner{너비: 100%; 높이: 584px; 지우기: 둘 다;}
.daohang{ 너비: 26.3%; 높이: 930px; 테두리 오른쪽: #d1d1d1 솔리드 1px; float: 왼쪽;}
.tou{ 너비: 350px; 높이: 180px; 테두리 하단: #228560 단색 1px; 배경: url(../img/3.png); 패딩 상단: 20px;}
.xiang{ 너비: 80px; 높이: 80px; 왼쪽 여백: 20px; 배경: url(../img/xiang.png);}
.nihao{ 너비: 350px; 높이: 35px; 여백 상단: 65px; 배경색: 검정색; 필터:알파(불투명도=50);-moz-불투명도:0.5;불투명도: 0.5;}
.nihao:hover{ 너비: 350px; 높이: 35px; 여백 상단: 65px; 배경색: #024c1e; 필터:알파(불투명도=70);-moz-불투명도:0.7;불투명도: 0.7; 커서: 포인터;}
.ni{ 너비: 150px; 높이: 27px; 플로트: 왼쪽; 색상: #fff; 텍스트 정렬: 중앙; 글꼴 크기: 20px; 여백 상단: 8px;}
.xia{ 너비: 70px; 높이: 27px; 플로트: 오른쪽; 색상: #fff; 텍스트 정렬: 중앙; 글꼴 크기: 20px; 여백 상단: 8px;}
.jiao{ 너비: 350px; 높이: 719px;}
.yue{너비: 350px; 높이: 35px; 색상: darkgrey;text-align: center;}
#cang{ 너비: 350px; 높이: 108px; 배경색: #28a176; 디스플레이:없음;}
.chang{ 너비: 350px; 높이: 108px; 디스플레이:없음;}
.xiao{ 너비: 350px; 높이: 35px; 테두리 하단: #f1f1f1 단색 1px; 텍스트 정렬: 중앙; 글꼴 크기: 25px; 색상: #232323;}
.xiao:hover{너비: 350px; 높이: 35px; 테두리 하단: #f1f1f1 단색 1px; 텍스트 정렬: 중앙; 글꼴 크기: 25px; 색상: #232323; 배경색: 노란색녹색; 커서: 포인터;}
.yice{ 너비: 73.6%; 높이: 930px; float: 오른쪽;}
.biaoti{ 너비: 100%; 높이: 52px; 배경색: #28a176;}
.heng{너비: 120px; 높이: 42px; 플로트: 왼쪽; 텍스트 정렬: 중앙; 색상: 흰색; 글꼴 크기: 25px; 글꼴 두께: 굵게; 여백 상단: 10px; 테두리 하단: #fff 단색 2px; 커서: 포인터;}
.zhuyao{ 너비: 100%; 높이: 870px; 명확함: 둘 다; 배경색: cornflowerblue;}

이 지后搞个jqery库 外加一个自己写的js：

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

$("#cang").slideUp("slow");
xiakai = 1;
$("#xia").html("▲");
}
}
var xiaakai = 1;
function xiaa(){
if(xiaakai ==1){
$("#hui").html("游戏会员 ▼");
$("#huicang" ).slideDown("느린");
xiaakai = 2;
$("#hui").css({ "배경": "#00fef5" });
}else{
$("#hui"). html("游戏会员 ▲");
$("#huicang").slideUp("slow");
xiaakai = 1;
$("#hui").css({ "배경": "흰색" } );
}
}
var xiabkai = 1;
function xiab(){
if(xiabkai ==1){
$("#qian").html("我的钱包 ▼");
$(" #qiancang").slideDown("느린");
xiabkai = 2;
$("#qian").css({ "배경": "#00fef5" });
}else{
$("#qian ").html("나의 钱包 ▲");
$("#qiancang").slideUp("slow");
xiabkai = 1;
$("#qian").css({ "배경": "white" });
}
}
var xiackai = 1;
function xiac(){
if(xiackai ==1){
$("#kai").html("开始游戏 ▼");
$("#youcang").slideDown("느린");
xiackai = 2;
$("#kai").css({ "배경": "#00fef5" });
}else{
$( "#kai").html("开始游戏 ▲");
$("#youcang").slideUp("slow");
xiackai = 1;
$("#kai").css({ "배경 ": "white" });
}
}
var xiadkai = 1;
function xiad(){
if(xiackai ==1){
$("#jin").html("近期战绩 ▼") ;
$("#jincang").slideDown("느림");
xiackai = 2;
$("#jin").css({ "배경": "#00fef5" });
}else{
$("#jin").html("近期战绩 ▲");
$("#jincang").slideUp("slow");
xiackai = 1;
$("#jin").css({ "배경": "흰색" });
}
}
var zz = "";
function zong1(){
zz = "开通会员";
adajuan();
};

function zong2(){
zz = "멤버십 갱신";
adajuan();
}
function zong3(){
zz = "회원 혜택";
dadajuan();
}
function zong4(){
zz = "잔액조회";
dadajuan();
}
function zong5(){
zz = "잔액충전";
dadajuan();
}
function zong6(){
zz = "잔액인출";
dadajuan ();
}
function zong7(){
zz = "시작하려면 클릭하세요";
adajuan();
}
function zong8(){
zz= "게임 설정";
dadajuan();
}
function zong9(){
zz = "친구 초대";
adajuan();
}
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 ();
스위치(i){
케이스 0:
$("#z0").html(zz);
$("#z0").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 1:
$("#z1").html(zz);
$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 2:
$("#z2").html(zz);
$("#z2").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 3:
$("#z3").html(zz);
$("#z3").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 4 :
$("#z4").html(zz);
$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 5:
$ ("#z5").html(zz);
$("#z5").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 6:
$("# z6").html(zz);
$("#z6").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 7:
$("#z7") .html(zz);
$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });
break;
default:
Alert("최대 8개의 창을 열 수 있습니다! ! ! ");
i--;
}
}else{
bianse();
스위치(x){
케이스 0:
$("#z0").css({ "border-bottom" : "샌디브라운 솔리드 2px" });
break;
사례 1:
$("#z1").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 2:
$("# z2").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 3:
$("#z3").css({ "border-bottom" : "sandybrown solid 2px " " });
break;
사례 4:
$("#z4").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 5:
$("# z5 ").css({ "border-bottom" : "sandybrown solid 2px" });
break;
사례 6:
$("#z6").css({ "border-bottom" : "sandybrown solid 2px " });
break;
사례 7:
$("#z7").css({ "border-bottom" : "sandybrown solid 2px" });
break;
기본값:
Alert("최대 8개 창을 열 수 있습니다! ");
}
i--;
}
i++;
}else{
warning("최대 8개의 창을 열 수 있습니다!!!");
}

}
function bianse( ) {
$("#z0").css({ "border-bottom" : "#fff solid 2px" });
$("#z1").css({ "border-bottom" : "#fff 솔리드 2px" });
$("#z2").css({ "테두리-하단" : "#fff 솔리드 2px" });
$("#z3").css({ "테두리-하단" : "#fff 솔리드 2px" });
$("#z4").css({ "border-bottom" : "#fff 솔리드 2px" });
$("#z5").css({ " border -bottom" : "#fff 솔리드 2px" });
$("#z6").css({ "border-bottom" : "#fff 솔리드 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" : "샌디브라운 솔리드 2px" });
}
function wobian3(){
bianse();
$("#z3").css({ "border-bottom" : "샌디브라운 솔리드 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
javascript
원천：php.cn
이전 기사：정규식 기본 소개 및 학습 예시 다음 기사：기존 콜백 함수로 다시 작성된 예시 튜토리얼을 공유하세요.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿