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

Posted 2023-05-08

【中文标题】使用范围滑块通过 javascript 更改 HSL 背景颜色

【英文标题】：Using range slider to change HSL background color with javascript

【发布时间】：2021-01-17 02:22:45

【问题描述】：

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

我的范围滑块：

<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

【参考方案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/