JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色
更新時間：2021年08月31日 08:46:15 作者：信仰柴神的人
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
大家好，今天我在看web前端的HTML時，看到input標(biāo)簽的type屬性是range時在頁面上顯示的是一個滑塊，我突發(fā)奇想能不能通過滑來改變網(wǎng)頁的顏色?，F(xiàn)在我和大家分享一下通過滑塊來改變網(wǎng)頁的顏色。
首先要知道怎么樣來表示顏色，顏色的表示有四種方式：
1、用顏色的名稱來表示顏色：red,green...等
2、用#加16進制數(shù)表示：#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中滑塊的設(shè)置：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"> </body>
JavaScript：為每個滑塊設(shè)置change事件，當(dāng)滑塊的值改變時就執(zhí)行。
<script>
//通過id獲取元素的函數(shù)
function $(id) {
return document.getElementById(id);
}
//獲取每個滑塊的值
let r = $('r').value
let g = $('g').value
let b = $('b').value
//通過id獲取元素
let box = $('box')
//設(shè)置網(wǎng)頁背景顏色
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
//為r值的滑塊設(shè)置事件
$('r').addEventListener("change", function () {
r = this.value;
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
//為g值的滑塊設(shè)置事件
$('g').addEventListener("change", function () {
g = this.value;
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
//為b值的滑塊設(shè)置事件
$('b').addEventListener("change", function () {
b = this.value
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
})
</script>
當(dāng)然input中也有改變顏色的方法
<input type="color" onchange="document.body.style.backgroundColor=this.value">
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript數(shù)據(jù)可視化:ECharts制作地圖
- 超詳細的JavaScript基本語法規(guī)則
- JavaScript中類型的強制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解
- JavaScript es6中var、let以及const三者區(qū)別案例詳解
- JavaScript 中this指向問題案例詳解
- JavaScript函數(shù)之call、apply以及bind方法案例詳解
- 詳解JavaScript中Arguments對象用途
- JavaScript CollectGarbage函數(shù)案例詳解
- JavaScript中BOM和DOM詳解
- JavaScript setTimeout與setTimeinterval使用案例詳解
- JavaScript定時器實現(xiàn)限時秒殺功能
- JavaScript實現(xiàn)限時秒殺功能
- JavaScript對象(詳細)
相關(guān)文章
Javascript執(zhí)行流程細節(jié)原理解析
這篇文章主要介紹了Javascript執(zhí)行流程細節(jié)解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
今天小編就為大家分享一篇layui的表單提交以及驗證和修改彈框的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript轉(zhuǎn)換與解析JSON方法實例詳解
這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了js格式化時間的方法，對javascript時間格式化的方法進行了總結(jié)，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細介紹了javascript原型繼承，闡明什么是原型繼承,以及在JavaScript中究竟如何使用原型繼承,感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript中return用法,結(jié)合實例形式簡單分析了javascript中return語句的功能與使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JS獲取html對象的幾種方式，有需要的朋友可以參考一下2013-12-12
JavaScript中const關(guān)鍵字的用法及特性
該文章講解了JavaScript中const關(guān)鍵字的用法以及它的一些特性，該關(guān)鍵字用于創(chuàng)建常量，即一旦賦值之后就不能再修改，但是，使用?const創(chuàng)建的對象和數(shù)組卻可以被修改，本文通過講解“賦值”和“變異”之間的重要區(qū)別，詳細解釋了這一現(xiàn)象,需要的朋友可以參考下2023-05-05
layui表格設(shè)計以及數(shù)據(jù)初始化詳解
今天小編就為大家分享一篇layui表格設(shè)計以及數(shù)據(jù)初始化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了生成無限制的微信小程序碼的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09