Question

我正在尝试使用范围滑块来编辑背景颜色，但是它不起作用，这是我哪里出错了：

我的范围滑块：

<input id="ex2" name="ex2' type="range" min="0" max="360" step="1" />

还有我的Javascript：

$(document).ready(function(){

var slider = document.getElementById("ex2");

$(slider).on('input', function () {

    var hue = $(this).val();

    var hsl = 'hsl('+ hue +', 50%, 50%)';

    console.log(hsl);

$(body).css({'background-color' : hsl });

});

});

也在这里：

https://jsfiddle.net/oqt1vhmj/2/

Answer 1

您检查控制台是否有任何错误？

只需修复一个小错字，一切正常：

$(document).ready(function(){

    var slider = document.getElementById("ex2");

    $(slider).on('input', function () {

        var hue = $(this).val();

        var hsl = 'hsl('+ hue +', 50%, 50%)';

        console.log(hsl);

        $('body').css({'background-color' : hsl });
        //  ^--- typo here

    });

});

Answer 2

小提琴未运行，因为您需要更改从中获取jQuery库的资源。（ ReferenceError上的错误：未定义$” ）

我添加了其他资源，例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

运行正常！

这是小提琴：

https://jsfiddle.net/noq2zd4f/8/

使用范围滑块使用JavaScript更改HSL背景颜色

2 个答案: