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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: DockerをインストールしてAlibaba Cloud Image Acceleratorを構成する方法
>>: MySQL データベースで機密データの暗号化と復号化を実装する方法
推薦する
Linux システムによって報告される xfs_vm_releasepage 警告問題に対処する方法
問題の説明最近、いくつかのマシンで、一日のさまざまな時間に次の警告メッセージが表示されました。 3月...
Linux でテキストから改行文字を削除する方法
復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...
MySql 5.7.21 無料インストール バージョンの構成方法 (Win10 の場合)
1.インストールしたい場所に解凍し、my.iniファイルを作成します。 my.iniの内容は次のと...
MySqlはページクエリ機能を実装します
まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...
MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
Ubuntu 18.04の下のディレクトリにディスクをマウントします
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
Javascript 共通高階関数の詳細
目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...
CentOS7でPHPスケジュールタスクを実行する方法
序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...
Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明
1. ファイアウォールの基本的な使い方起動する： systemctl は、firewalld を起動...
判定条件を使用してCSSファイルをインポートする
解決策 1: HEAD に次のコードを挿入するなど、HTML ドキュメントで条件付きインポートを使用...
React Nativeでシンプルなゲームエンジンを作る
目次導入始めるReact Nativeゲームエンジンの簡単な紹介React Nativeでスネークゲ...
HTML メタの使用例
使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...
よく使われるシングルページアプリケーションウェブサイト共有
CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...
JSはキャンバス技術を使用してeChartsの棒グラフを模倣します
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
Tomcatのサーバーオプションの詳細な説明
1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 （...