亲宝软件园·资讯

展开

js滑块改变网页颜色 JavaScript实现通过滑块改变网页颜色

信仰柴神的人 人气:0
想了解JavaScript实现通过滑块改变网页颜色的相关内容吗,信仰柴神的人在本文为您仔细讲解js滑块改变网页颜色的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js滑块改变网页颜色,js网页颜色,js滑块改变颜色,下面大家一起来学习吧。

大家好,今天我在看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">

加载全部内容

相关教程
猜你喜欢
用户评论