JavaScript實現通過滑塊改變網頁顏色

Posted on by

大傢好，今天我在看web前端的HTML時，看到input標簽的type屬性是range時在頁面上顯示的是一個滑塊，我突發奇想能不能通過滑來改變網頁的顏色。現在我和大傢分享一下通過滑塊來改變網頁的顏色。

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

1、用顏色的名稱來表示顏色：red,green…等

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">
</body>

JavaScript：為每個滑塊設置change事件，當滑塊的值改變時就執行。

<script>
    //通過id獲取元素的函數
    function $(id) {
        return document.getElementById(id);
    }
    //獲取每個滑塊的值
    let r = $('r').value
    let g = $('g').value
    let b = $('b').value
    //通過id獲取元素
    let box = $('box')
    //設置網頁背景顏色
    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.value
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
</script>

當然input中也有改變顏色的方法

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：