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の詳細なインストールと使用
推薦する
phpstudy から Linux への MySQL の移行に関するチュートリアル
プロジェクトの目的元のWindows環境でphpstudyを使用して構築されたMySQL 5.5.5...
フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。
1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...
ウェブページの背景画像を伸ばす2つの方法
解決策は2つあります。 1つはCSSで、background-size:coverを使用して画像の伸...
Mariadb リモート ログイン構成と問題解決
序文：インストール プロセスについては詳しく説明しません。問題に直接触れましょう。MySQL のリモ...
MySQL (5.6 以下) の JSON 解析の詳細な例
MySQL（5.6以下）はjsonを解析します #json 解析関数 DELIMITER $$ `j...
初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール
今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...
Springboot プロジェクトの Docker-compose イメージリリースプロセス分析
導入Docker-Compose プロジェクトは、Docker コンテナ クラスターの迅速なオーケス...
axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法
目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...
Webフロントエンドのパフォーマンス最適化
ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...
MySQLイベント計画タスクに関する簡単な説明
1. イベントが有効になっているかどうかを確認する'%sche%' のような変数を表...
CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法
Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...
docker runコンテナの自動終了の解決策
今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...
プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法
マイクロサービスのイメージは、保存用に Docker リポジトリにアップロードされます。一般的に使用...
JSはアニメーションのレイアウト変換を実装します
JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
Linux ipcsコマンドの使用
1. コマンドの紹介ipcs コマンドは、Linux のプロセス間通信機能の状態を報告するために使用...