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の詳細なインストールと使用
推薦する
MySql 共通クエリコマンド操作リスト
MYSQL でよく使用されるクエリ コマンド: mysql> select version()...
Docker がポート 2375 を公開し、サーバー攻撃を引き起こす問題と解決策
docker リモート API を学習した学生であれば、ポート 2375 についてよくご存知だと思い...
eCharts でパーセンテージ付きの横棒グラフを実装する方法
目次サンプルコードレンダリングコード分析要約するサンプルコード var データ = [220, ...
シンプルなカルーセル効果を実現するネイティブ js
この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...
Vueスロットの使用の詳細
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
MySQL5.7.18winX64のWin10インストールでサーバーの起動に失敗し、エラーメッセージも表示されない
システム環境: Win10 64ビットMySQL バージョン: mysql-5.7.18-winX6...
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...