JavaScriptはスライダーを介してWebページの色を変更することを実装します

みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性がrangeのときにページ上にスライダーが表示されるのを見ました。ふと、スライドすることでウェブページの色を変えられるのかなと思いました。ここで、スライダーを使用して Web ページの色を変更する方法を紹介します。

まず、色の表現方法を知る必要があります。色の表現方法は4つあります。

1. 色の名前を使用して色を示します: 赤、緑...など。

2. # と 16 進数を使用します。赤の場合は #FF0000/#F00、緑の場合は #00FF00/#0F0 など。

3. RGB 値を使用します: 黒の場合は rgb(0,0,0)、白の場合は rgb(255,255,255) など。

4. RGBA値で表す: RGBA(0,0,0,0.5)半透明黒、RGBA(255,0,0,.5)半透明赤(a値は透明度を示す)

色を表すにはRGB値を使用します。r、g、bの値の範囲はすべて0〜255です。

bodyのスライダーの設定: maxは最大値、minは最小値、stepはステップ値、またデフォルトで中間値に設定されるvalue属性もあります。

<body id="box">
<label for="r">r値</label>
<input type="range" max="255" min="0" step="1" id="r">
<label for="g">g値</label>
<input type="range" max="255" min="0" step="1" id="g">
<label for="b">b 値</label>
<input type="range" max="255" min="0" step="1" id="b">
</本文>

JavaScript: スライダーの値が変更されたときに実行される変更イベントを各スライダーに設定します。

<スクリプト>
    //IDで要素を取得する関数 function $(id) {
        document.getElementById(id) を返します。
    }
    //各スライダーの値を取得する let r = $('r').value
    g = $('g').valueとします。
    b = $('b').valueとする
    //IDで要素を取得する let box = $('box')
    //Web ページの背景色を設定します。box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    //r値スライダーのイベントを設定します$('r').addEventListener("change", function () {
        r = this.value;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //g値スライダーのイベントを設定します $('g').addEventListener("change", function () {
        g = this.value;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //b値スライダーのイベントを設定します $('b').addEventListener("change", function () {
        b = this.値
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
</スクリプト>

もちろん、入力時に色を変える方法もあります

<input type="color" onchange="document.body.style.backgroundColor=this.value">

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

以下もご興味があるかもしれません:

JavaScript によるデータ視覚化: ECharts マップの作成
非常に詳細な基本的なJavaScript構文ルール
JavaScript における型の必須および暗黙的な変換の詳細な説明
JavaScript es6 における var、let、const の違いの詳細な説明
JavaScript における this ポイントの問題の詳細な説明
JavaScript 関数呼び出し、適用、バインドメソッドのケーススタディ
JavaScript における Arguments オブジェクトの使用に関する詳細な説明
JavaScript CollectGarbage 関数の例
JavaScript における BOM と DOM の詳細な説明
JavaScript の setTimeout と setTimeinterval の使用例の説明
期間限定フラッシュセール機能を実現するJavaScriptタイマー
期間限定フラッシュセール機能を実装するJavaScript
JavaScript オブジェクト (詳細)

<<: DockerをインストールしてAlibaba Cloud Image Acceleratorを構成する方法

>>: MySQL データベースで機密データの暗号化と復号化を実装する方法

Dockerコンテナでルート権限を取得する方法

ブログ

jQuery はラブエフェクトをクリックする

ブログ

Nginx は動的と静的の分離を実装します例の説明

ブログ

MySQLで適切なインデックスを選択する方法

ブログ

ファイルの種類を検出するJavaScriptメソッド

ブログ

SQLベースのクエリステートメント

ブログ

JavaScript でのカスタムスワイパーコンポーネントの詳細な説明

ブログ

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

ブログ

docker compose の記述ルールについての簡単な説明

ブログ

Linux で JDK をインストールして環境変数を設定する方法 (この記事で十分です)

ブログ

JavaScriptはスライダーを介してWebページの色を変更することを実装します

Dockerコンテナでルート権限を取得する方法

jQuery はラブエフェクトをクリックする

Nginx は動的と静的の分離を実装します例の説明

MySQLで適切なインデックスを選択する方法

ファイルの種類を検出するJavaScriptメソッド

SQLベースのクエリステートメント

JavaScript でのカスタムスワイパーコンポーネントの詳細な説明

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

docker compose の記述ルールについての簡単な説明

Linux で JDK をインストールして環境変数を設定する方法 (この記事で十分です)

推薦する

vue+rem カスタムカルーセル効果

優れたHTML印刷コードがページめくりをサポート

Docker ベースの Tomcat クラスタと Nginx ロードバランシングの展開の概要

Angularコンポーネント投影の詳細な説明

Vueはシンプルなショッピングカートの例を実装します

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

.NETCore Dockerはコンテナ化とプライベートイメージリポジトリ管理を実装します

WeChatアプレットがユーザーの移動軌跡を記録

テキストレイアウトの問題を解決するためにテキストオーバーフローを使用する CSS3 の簡単な分析

Linux でのデータベースのスケジュールバックアップの実装スクリプト

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

Linux で scp コマンドを使用してファイルをリモートでコピーする方法の詳細な説明

nginx ロケーション優先度の詳細な説明

Vueで複数の添付ファイルをアップロードする実装例

MySQL パスワードは正しいが、ローカルにログインできない -1045