JavaScript 实现通过滑块动态改变网页背景颜色

<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>

<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 type="color" onchange="document.body.style.backgroundColor=this.value">