この記事では、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 スレーブレプリケーションの展開と監視
導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...
目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...
エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...
vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...
この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号...
目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...
序文今日は、Prince が Windows で負荷分散に Nginx + Tomcat を使用する...
1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...
Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
必要なファイルをインストールする Yum インストール openssl-* -yデータベースインデッ...
1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...
<p></p> の行間隔を設定するには、style="line-h...
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...