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 スレーブレプリケーションの展開と監視