この記事では、9グリッドクリックの色変更効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 9 つのグリッドのレイアウトを完成させ、任意のグリッドをクリックして背景色を変更します。 まず、表を使用して 9 つの正方形のグリッド フレームワークを完成させます。 <テーブル> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </テーブル> Jiugong グリッド スタイルを設定します。 <スタイル> テーブル{ 高さ: 600px; 幅: 600ピクセル; 境界線の間隔: 0; } td{ マージン: 0; border:1px 赤一色; } </スタイル> 最後に、各四角形にクリックがあるという効果を実現するために、各 td に onclick 属性を追加し、次のようにオブジェクト自体を参照します。 <テーブル> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> </テーブル> 以前、次のように CSS 経由ですべてのクリック イベントを設定しようとしました。 <スタイル> td{ onclick:これを変更します。 } </スタイル> しかし、それは使用できず、まだ疑問が残っています。 最後に、最も重要な JS コード部分では、Math.random()*256 を使用して 0 から 256 の間の乱数を生成し、parseInt() を使用して型を整数に変換し、「.style.backgroundColor」を通じて背景色を設定します。 関数変更(a) { var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256); a.style.backgroundColor="rgb("+randomNum+")"; } 完全なコードは次のとおりです。 テーブルバージョン: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> テーブル{ 高さ: 600px; 幅: 600ピクセル; 境界線の間隔: 0; } td{ マージン: 0; border:1px 赤一色; } </スタイル> </head> <本文> <!--フロントエンドの知識を使用して 9 つのグリッド レイアウトを実現し、任意のグリッドをクリックしてグリッドの背景色をランダムに変更します--> <テーブル> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> <tr> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> <td onclick="変更(これ)"></td> </tr> </テーブル> <スクリプト> 関数変更(emle) { コンソールログ("1"); var randomNum = parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256); console.log(ランダム数値); emle.style.backgroundColor="rgb("+randomNum+")"; } </スクリプト> </本文> </html> div バージョン: <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> #箱{ マージン:0 自動; 幅: 306ピクセル; 高さ: 306px; 境界線: 1px 実線の赤; } #ボックスdiv{ 幅: 100ピクセル; 高さ: 100px; 境界線: 1px 実線 #ccc; フロート: 左; } </スタイル> </head> <本文> <div id="ボックス"> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> <div onclick="changeColor(this)"></div> </div> <スクリプト> 関数 changeColor(要素){ var red = parseInt(Math.random()*256); var blue = parseInt(Math.random()*256); var green = parseInt(Math.random()*256); elem.style.backgroundColor = "rgb("+red+","+blue+","+green+")"; } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Eclipse と IDEA 用に Tomcat サーバーを構成する方法
>>: MYSQL 5.6 スレーブレプリケーションの展開と監視
概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...
要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウ...
目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...
SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...
目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...
成果を達成する 実装コードhtml <div class="wrap"&g...
多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...
1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...
この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...
1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...
(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...