JavaScript は 9 グリッドのクリックによる色の変更効果を実装します

JavaScript は 9 グリッドのクリックによる色の変更効果を実装します

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • AngularJS クリックしてスタイルを追加、クリックして色設定を変更するサンプルコード
  • JavaScript は、マウスクリックによるナビゲーションバーの色変更効果を実装します。
  • AngularJSはボタンプロンプトとクリックカラー変更効果を実装します
  • JavaScript テーブルの交互の行の色を変更し、マウスの動きとクリック効果を追加する方法
  • Jsは、現在のクリックでラベルの色が変わることを認識し、他のラベルを強調表示して元の色を復元します。
  • JavaScript CSS を使用して、GridView 行の背景色の変更、マウスオーバーによる行の色の変更、クリックによる行の色の変更の選択を実装します。
  • jQuery ベースの JavaScript、テーブルをホバーすると色の変更/復元、テーブルをクリックすると色の変更/復元、行をクリックしてチェックボックスを選択する

<<:  Eclipse と IDEA 用に Tomcat サーバーを構成する方法

>>:  MYSQL 5.6 スレーブレプリケーションの展開と監視

推薦する

MySQL テーブルを返すとインデックスが無効になるケースの説明

導入MySQL InnoDB エンジンがレコードをクエリし、インデックス カバレッジを使用できない場...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...

vscodeカスタムvueテンプレートの実装

vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...

CSS 擬似要素::マーカーの詳細な説明

この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号...

JS での new の手書き実装

目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...

Windows で負荷分散に Nginx+Tomcat を使用するための完全な手順

序文今日は、Prince が Windows で負荷分散に Nginx + Tomcat を使用する...

Node.js での組み込みモジュールとカスタムモジュールの実装

1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...

廃止された Docker は Podman に置き換えられますか?

Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

Linux Centos8 CA証明書作成チュートリアル

必要なファイルをインストールする Yum インストール openssl-* -yデータベースインデッ...

Ubuntu 14.04 で QT5 をインストール、設定、アンインストールするための詳細な手順

1. 以前 QT5.13 バージョンをダウンロードしましたが、インストール後、Qtcreator を...

HTMLの行間設定方法と問題点

<p></p> の行間隔を設定するには、style="line-h...

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...