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正規表現の一般的な機能の概要

推薦する

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策

docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

MySQL データ型 DECIMAL の詳細な分析

序文:金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...

MySQLストアドプロシージャにおけるカーソル(DECLARE)の原理と使い方の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャにおけるカーソル (DECLARE) ...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

nginx でクロスドメイン障害修復を構成する方法の例

Nginxのクロスドメイン設定は次のようには機能しません サーバー{ 聞く 80; server_n...

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...

jsはフォーム検証機能を実装します

この記事の例では、フォーム検証機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...

Dockerはbusyboxを使用してベースイメージを作成します

Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...

IDEA に基づいて Tomcat サーバーを展開するための詳細な手順

目次導入ステップ1ステップ2: アイデアで動的Webプロジェクトを作成するステップ3: Tomcat...