快捷導(dǎo)航

JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色

更新時(shí)間：2021年08月31日 08:46:15 作者：信仰柴神的人

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大家好，今天我在看web前端的HTML時(shí)，看到input標(biāo)簽的type屬性是range時(shí)在頁面上顯示的是一個(gè)滑塊，我突發(fā)奇想能不能通過滑來改變網(wǎng)頁的顏色。現(xiàn)在我和大家分享一下通過滑塊來改變網(wǎng)頁的顏色。

首先要知道怎么樣來表示顏色，顏色的表示有四種方式：

1、用顏色的名稱來表示顏色：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>
    //通過id獲取元素的函數(shù)
    function $(id) {
        return document.getElementById(id);
    }
    //獲取每個(gè)滑塊的值
    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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js簡單粗暴的發(fā)布訂閱示例代碼
這篇文章主要給大家介紹了js簡單粗暴的發(fā)布訂閱的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
php類中static與self的使用區(qū)別淺析
在閱讀一些框架的源碼時(shí)發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關(guān)于php類中static與self的使用區(qū)別的相關(guān)資料,需要的朋友可以參考下
2021-06-06
JavaScript定義簡單的頁面復(fù)選框?qū)崿F(xiàn)全選操作
本文主要介紹了JavaScript定義簡單的頁面復(fù)選框?qū)崿F(xiàn)全選操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
前端常用的js函數(shù)方法
這篇文章主要給大家分享的是常用的js函數(shù)的方法，告別搜索引擎的幫助，提高你的開發(fā)效率，,需要的朋友可以參考一下，希望對你的學(xué)習(xí)有所幫助
2021-12-12
微信小程序商品詳情頁的底部彈出框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序商品詳情頁的底部彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
微信小程序全局狀態(tài)的深入講解
這篇文章主要介紹了微信小程序全局狀態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
關(guān)于JS與jQuery中的文檔加載問題
本文通過實(shí)例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧
2017-08-08
JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
鼠標(biāo)滑在標(biāo)題上顯示圖片的JS代碼
這篇文章主要介紹了鼠標(biāo)滑在標(biāo)題上顯示圖片的JS代碼，有需要的朋友可以參考一下
2013-11-11
fullCalendar日歷插件玩法示例解析
這篇文章主要介紹了fullCalendar日歷插件玩法示例解析,包括Fullcalendar安裝,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01