使用范围滑块通过 javascript 更改 HSL 背景颜色答案

【问题标题】：Using range slider to change HSL background color with javascript使用范围滑块通过 javascript 更改 HSL 背景颜色
【发布时间】：2024-01-14 04:00:01
【问题描述】：

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

我的范围滑块：

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

【问题讨论】：

jsfiddle.net/uc582g9b/2

标签： javascript html jquery css slider

【解决方案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

    });

});

【讨论】：

【解决方案2】：

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

我添加了一个不同的资源，例如：

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

它运行良好！

这是小提琴：

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

【讨论】：