JavaScript カラービューア

JavaScript カラービューア

この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

成果を達成する

  • 箱は最初は白です
  • 入力ボックスにカラーコードを入力し、クリックして色を表示すると、対応する色が上に表示されます。
  • 「復元」をクリックすると、初期の白色に戻り、入力ボックスの内容がクリアされます。

実装コード

<!DOCTYPE html>
<html lang="ja">
    <ヘッド>
        <メタ文字セット="UTF-8" />
        <title>カラービューア</title>
        <スタイル>
            #色 {
                幅: 150ピクセル;
                高さ: 150px;
                背景色: #fff;
                境界線: 1px実線 #000;
            }
        </スタイル>
    </head>
    <本文>
        <div id="color"></div>
        <input id="inp" type="text" placeholder="カラーコードを入力してください..." />
        <button id="trans">色を表示</button>
        <button id="rst">復元</button>
    </本文>
    <スクリプト>
        trans = document.getElementById('trans'); とします。
        color = document.getElementById('color'); とします。
        inp = document.getElementById('inp'); とします。
        rst = document.getElementById('rst'); とします。
        trans.addEventListener('クリック', () => {
            color.style.backgroundColor = inp.value;
        });
        rst.addEventListener('クリック', () => {
            color.style.backgroundColor = '#fff';
            inp.value = '';
        });
    </スクリプト>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはシンプルなオブジェクト指向のカラーピッカーの例を実装します
  • js で実装されたシンプルなラジオの背景色セレクター コード
  • JavaScript を使用して 3 つの原色に基づいたカラー ピッカーを作成する方法
  • jsは異なる色の値を取得できるカラーセレクタインスタンスを実装します
  • マウスが選択されたときにウェブページの背景色を動的に変更する JS コード
  • JS 小さな機能 (ボタン選択色) 簡単な例
  • JavaScript はシステムに組み込まれたカラー ピッカー機能を取得します (画像)
  • 5 つの Javascript カラーピッカー
  • js カラーピッカー (Firefox と互換性あり)
  • js カラーピッカーコード [Firefox はサポートされていません]

<<:  Ubuntu環境でのSSHの詳細なインストールと使用

>>:  PostgreSQL正規表現の一般的な機能の概要

推薦する

ポータルサイト再設計のユーザーエクスペリエンス

<br />2006年10月12日のNetEaseの新ホームページの公開から、2008年...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

Vue はフォームデータ検証のサンプルコードを実装します

el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...

Vue3 (V) HTTPライブラリaxiosの統合の詳細

目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

MySQL 8.0.22 のダウンロード、インストール、設定方法のグラフィックチュートリアル

参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...

コマンドを使用してMySQLデータベース(de1)を作成する方法

1. MYSQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...

Mysql データベース ストアド プロシージャの基本構文の説明

プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...

Vue 親子コンポーネントの相互値の転送と呼び出し

目次1. 親が子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに値を渡す3. 子コ...

ダウンロードにおすすめの氷と雪のフォント 33 種類 (個人用および商用)

01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル

私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...

あるテーブルのデータの列を別のテーブルの列にコピーするMySQLメソッド

mysql 1 つのテーブル列を別のテーブルにコピーする場合によっては、フィールドから別の新しいフィ...

JavaScript でじゃんけんゲームを書く

この記事では、JavaScriptでじゃんけんゲームを書くための具体的なコードを参考までに紹介します...

Expressプロジェクトファイルディレクトリの説明と詳細な機能の説明

app.js: スタートアップファイル、またはエントリファイルpackage.json: プロジェク...