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 ターンテーブル抽選の簡単な実装

ブログ

dockerにros2をインストールするための詳細な手順

ブログ

Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する

ブログ

MySql 8.0.11-Winxp64 (無料インストール版) 設定チュートリアル

ブログ

JavaScriptスコープについての簡単な説明

ブログ

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

ブログ

MySQLで最新のトランザクションIDを照会する方法

ブログ

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

ブログ

Linuxの同時実行は簡単です。このようにするだけです

ブログ

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

ブログ

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

Vue ターンテーブル抽選の簡単な実装

dockerにros2をインストールするための詳細な手順

Linuxの簡単な分析でファイアウォールの状態と外部に開いているポートの状態を確認する

MySql 8.0.11-Winxp64 (無料インストール版) 設定チュートリアル

JavaScriptスコープについての簡単な説明

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

MySQLで最新のトランザクションIDを照会する方法

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

Linuxの同時実行は簡単です。このようにするだけです

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

推薦する

MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

MySQL 接続失敗の一般的な障害と原因

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

Windows 10 で Ubuntu 20.04 LTS をアップデートする方法

Reactはページの透かし効果の全プロセスを実現します

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィックチュートリアル

ウェブデザインにおけるカラーマッチングの優れた例30選

Docker クロスホストネットワーク (オーバーレイ) の実装

SVN のインストールと基本操作 (グラフィックチュートリアル)

MySQL の自動増分主キーに関する詳細な説明

Mysql通信プロトコルの詳細な説明

Vueフォームで画像を処理する方法

MySQLの日付文字列タイムスタンプ変換の詳細な説明

MySQL の悲観的ロックと楽観的ロックの理解と応用分析