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

發(fā)布時(shí)間：2021-08-31 10:29:43 來(lái)源：億速云閱讀：142 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下JavaScript如何實(shí)現(xiàn)通過滑塊改變網(wǎng)頁(yè)顏色，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

1、用顏色的名稱來(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>
    //通過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)頁(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>

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

當(dāng)然input中也有改變顏色的方法

<input type="color" onchange="document.body.style.backgroundColor=this.value">

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

看完了這篇文章，相信你對(duì)“JavaScript如何實(shí)現(xiàn)通過滑塊改變網(wǎng)頁(yè)顏色”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽