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

ブログ    

推薦する

Nginx の負荷分散アルゴリズムとフェイルオーバー分析

概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...

CSSは複数の要素をボックスの両端に揃える効果を実現します

要素の両端を揃える配置レイアウトは、実際の開発のいたるところで見られます。これは、フレックスレイアウ...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

ドラッグ効果を実現するための純粋なCSSコード

目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

MySQL マスター スレーブ データが矛盾しています。プロンプト: Slave_SQL_Running: 解決策はありません

この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...

MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析

多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...

Linux での MySQL 8.0 インストール チュートリアル

この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...

CentOS7.5 MySQLのインストールチュートリアル

1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...