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