闲着没事学了学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 shuzu[i] = zz;
var kaiguan = 1;
if(i!=0){
for(var j = 0;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 in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 中国語版
中国語版、とても使いやすい
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
