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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu環境でのSSHの詳細なインストールと使用
推薦する
GobangゲームのWebバージョンを実装するためのJavaScript
この記事では、GobangゲームのWebバージョンを実装するためのJavaScriptの具体的なコー...
MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明
目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...
nginx+FastDFS を使ってファイル管理システムを段階的に構築する
目次1. FastDFS の概要1. はじめに2. FastDFSストレージ戦略3. FastDFS...
MySQL5.7 並列レプリケーションの原理と実装
データ操作とメンテナンスに少しでも知識のある人なら、MySQL 5.5 以前では再生に単一の SQL...
Js クラスの構築と継承のケースの詳細な説明
JS のクラスの定義や継承は本当に多様なので、別のノートブックを開いて記録しておきます。意味オブジェ...
閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法
Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...
nginxカスタム変数と組み込み定義済み変数の使用
概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...
Vue の this.$store.state.xx.xx に関する簡単な説明
目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...
MySQL パーティション フィールド列に別のインデックスを作成する必要がありますか?
序文パーティション フィールドは主キーの一部でなければならないことは誰もが知っています。では、複合主...
Linux の crontab タスク スケジューリングの簡単な分析
1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...
js 加算、減算、乗算、除算の正確な計算方法のサンプルコード
序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...
React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)
目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....
Dockerコンテナ相互接続の予備的な実践についての簡単な説明
1. Dockerコンテナ間の相互接続Docker は現在、軽量の仮想化ソリューションとなっています...
Linux でのスケジュールされたタスクと遅延タスクの詳細な説明
で+ 時間 17:23に at> touch /mnt/file{1..9} ##アクションを...
HTML テーブル マークアップ チュートリアル (16): タイトルの水平方向の配置属性 ALIGN
デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...