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

CentOS で Mysql を再起動するさまざまな方法 (推奨)

ブログ

spanタグのスタイルに幅属性を設定する方法

ブログ

tomcat をインストールし、Linux で Web サイトを展開します (推奨)

ブログ

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

ブログ

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

ブログ

gbk utf8 GBK と UTF-8 ウェブページエンコーディングを正しく理解して使用する方法

ブログ

HTMLのタグと要素の違いの詳細な説明

ブログ

src 属性と href 属性の違い

ブログ

JavaScript の知識: コンストラクタも関数である

ブログ

Vueのdiffアルゴリズムについての簡単な説明

ブログ

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

CentOS で Mysql を再起動するさまざまな方法 (推奨)

spanタグのスタイルに幅属性を設定する方法

tomcat をインストールし、Linux で Web サイトを展開します (推奨)

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

gbk utf8 GBK と UTF-8 ウェブページエンコーディングを正しく理解して使用する方法

HTMLのタグと要素の違いの詳細な説明

src 属性と href 属性の違い

JavaScript の知識: コンストラクタも関数である

Vueのdiffアルゴリズムについての簡単な説明

推薦する

Dockerfileを使用してDockerイメージを構築する手順

Ubuntu 18.04 のログインループ/ブートインターフェイスで停止/グラフィカルインターフェイスに入ることができない問題を解決する方法

MySQL 論理バックアップとリカバリテストの概要

VUEはトークンログイン認証を実装

Linux スケジュールタスクの関連操作の概要

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィックチュートリアル

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

Vue で SVG アイコンを導入する 2 つの方法

MySQL での GROUP_CONCAT の使用例の分析

html2canvas で破線境界線を実装する例

mysqlは指定された期間内の統計データを取得します

Docker はクラスター MongoDB 実装手順を構築します

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

MySQL トランザクション分離レベルの原則例分析