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 データベースで機密データの暗号化と復号化を実装する方法

ふるい抽選を実施するミニプログラム

ブログ

Vue はインターフェースのスライド効果を実装します

ブログ

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

ブログ

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

ブログ

MySQL での実行計画の explain コマンド例の詳細な説明

ブログ

Alpine イメージに Ansible サービスを追加する方法

ブログ

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

ブログ

CCS におけるマージン: トップ崩壊問題を解決する

ブログ

タブバーのいくつかの実装方法（推奨）

ブログ

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

ブログ

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

ふるい抽選を実施するミニプログラム

Vue はインターフェースのスライド効果を実装します

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

MySQL での実行計画の explain コマンド例の詳細な説明

Alpine イメージに Ansible サービスを追加する方法

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

CCS におけるマージン: トップ崩壊問題を解決する

タブバーのいくつかの実装方法（推奨）

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

推薦する

MySQL カーソルの定義と使用法

Apple Watchのインタラクションデザインにおける4つの全く異なる体験が明らかに

既存のDockerコンテナの内容を変更する方法

すべてまたは逆の選択機能を実現するJavaScript

HTML でのフォームとフォーム送信操作に関する情報のコレクション

Windows 10 での Hyperledger Fabric 1.4 環境構築プロセスの図

デザイン理論：人の心を理解する方法

MySQLデータベースのタイムアウト設定を構成する方法の例

高品質なコードを書く Web フロントエンド開発実践書の抜粋

Vueカスタムツリーコントロールの使い方の詳細な説明

Ubuntu 18.04 は mysql 5.7.23 をインストールします

Jenkins の紹介と Docker で Jenkins をデプロイする方法

Apache での ModSecurity のインストール、有効化、および構成

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

HTML テーブルマークアップチュートリアル (10): セルパディング属性 CELLPADDING