コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 私が作成した JS サンプルを共有する

私が作成した JS サンプルを共有する

零下一度
リリース： 2017-06-26 13:40:03
オリジナル
1151 人が閲覧しました

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

下面是html代码：

 





用户娱乐系统










之後呢加个css：

.box{ width: 100%;高さ: 1000ピクセル; border-bottom: #228560 ソリッド 1px;}
.logo{ width: 100%;高さ: 55ピクセル;ボーダーボトム: #228560 ソリッド 3 ピクセル;背景色: #28a176;パディングトップ: 15px;}
.biaozhi{ 幅: 300px;高さ: 35ピクセル;背景: url(../img/tu.png) リピートなし;マージン左: 50px;テキスト整列: 右;色: 緑黄色;フォントサイズ: 30px; float: left;}
.you{ width: 150px;高さ: 35ピクセル;フロート: 右; margin-right: 50px;}
.more{ width: 50px;高さ: 35ピクセル;フロート: 左;フォントサイズ: 25px;テキスト整列: 中央;色: 白;}
.more:hover{ 幅: 50px;高さ: 35ピクセル;フロート: 左;フォントサイズ: 25px;テキスト整列: 中央;色: 緑黄色;カーソル: ポインタ;}
.banner{幅: 100%;高さ: 584ピクセル;クリア: 両方;}
.daohang{ 幅: 26.3%;高さ: 930ピクセル;境界線右: #d1d1d1 実線 1px; float: left;}
.tou{ width: 350px;高さ: 180ピクセル;ボーダーボトム: #228560 ソリッド 1px;背景: url(../img/3.png);パディングトップ: 20px;}
.xiang{ 幅: 80px;高さ: 80ピクセル;マージン左: 20px;背景: url(../img/xiang.png);}
.nihao{ 幅: 350px;高さ: 35ピクセル;マージントップ: 65px;背景色: 黒; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5;}
.nihao:hover{ width: 350px;高さ: 35ピクセル;マージントップ: 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;高さ: 35ピクセル; color: darkgrey;text-align:center;}
#cang{幅:350px;高さ: 108ピクセル;背景色: #28a176;表示: なし;}
.chang{ 幅: 350px;高さ: 108ピクセル;ディスプレイ: なし;}
.xiao{ 幅: 350px;高さ: 35ピクセル;ボーダーボトム: #f1f1f1 ソリッド 1px;テキスト整列: 中央;フォントサイズ: 25px;色: #232323;}
.xiao:hover{幅: 350px;高さ: 35ピクセル;ボーダーボトム: #f1f1f1 ソリッド 1px;テキスト整列: 中央;フォントサイズ: 25px;色: #232323;背景色: 黄緑;カーソル: ポインタ;}
.yice{ 幅: 73.6%;高さ: 930ピクセル; float: 右;}
.biaoti{ 幅: 100%;高さ: 52ピクセル;背景色: #28a176;}
.heng{幅: 120px;高さ: 42ピクセル;フロート: 左;テキスト整列: 中央;色: 白;フォントサイズ: 25px;フォントの太さ: 太字;マージンの上部: 10px;ボーダーボトム: #fff ソリッド 2px;カーソル: ポインタ;}
.zhuyao{ 幅: 100%;高さ: 870ピクセル;クリア：両方。背景色: 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({ "背景": "白" } );
}
}
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": "白" });
}
}
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 ": "白" });
}
}
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({ "背景": "白" });
}
}
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 sold 2px" });
ブレーク;
ケース 1:
$("#z1").html(zz);
$("#z1").css({ "border-bottom" : "sandybrown sold 2px" });
ブレーク;
ケース 2:
$("#z2").html(zz);
$("#z2").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 3:
$("#z3").html(zz);
$("#z3").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 4 :
$("#z4").html(zz);
$("#z4").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 5:
$ ("#z5").html(zz);
$("#z5").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 6:
$("# z6").html(zz);
$("#z6").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 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" : "砂茶色の固体2px" });
ブレーク;
ケース 1:
$("#z1").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 2:
$("# z2").css({ "border-bottom" : "sandybrown ソリッド 2px" });
ブレーク;
ケース 3:
$("#z3").css({ "border-bottom" : "sandybrown ソリッド 2px " " });
ブレーク;
ケース 4:
$("#z4").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
ケース 5:
$("# z5 ").css({ "border-bottom" : "sandybrown ソリッド 2px" });
ブレーク;
case 6:
$("#z6").css({ "border-bottom" : "sandybrown ソリッド 2px" " });
ブレーク;
case 7:
$("#z7").css({ "border-bottom" : "sandybrown Solid 2px" });
ブレーク;
デフォルト:
alert("最大 8ウィンドウを開けることができます! ");
}
i--;
}
i++;
}else{
alert("最大 8 つのウィンドウを開けます!!!");
}

}
function bianse( ) {
$("#z0").css({ "border-bottom" : "#fff ソリッド 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" : "サンディブラウンソリッド 2px" });
}
function wobian1(){
bianse();
$("#z1").css({ "border-bottom" : "sandybrown sold 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" : "サンディブラウンソリッド 2px" });
}
function nibange(){
alert("一番嫌い!!");
}

このページは移動できます！ははは！ ！ ！

以上が私が作成した JS サンプルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：php.cn
前の記事：正規表現の基礎入門と学習例 次の記事：従来のコールバック関数に書き直されたチュートリアルの例を共有する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 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',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート