javascript - 如何在 HTML 中显示 JavaScript 数组

Question

我有一个 JavaScript 应用程序，可以将滤镜应用于实时视频。

我想知道如何在用户点击过滤器按钮后使用inner.HTML显示当前过滤器正在使用的内容。

我想在此处显示当前的滤镜(棕褐色、灰度等)

<p id="filterName"></p>

这是我更改过滤器的代码，我觉得我必须将显示过滤器的代码行放在最后，作为过滤器按钮功能的一部分。

 // CSS filters 
    //this array will cycle through the filter effects
    var index = 0; //the array starts at 0
    var filters = ['grayscale', 'sepia', 'saturate', 'hue', 'invert', 'no-filter'];



    // this applies the filter to the video feed, takes the class of the video feed
    var changeFilter = function () {
        var el = document.getElementById('video');
        el.className = 'videoClass';

        //this will cycle through the filters, once it hits the final filter it will reset
        var effect = filters[index++ % filters.length]
        if (effect) {
            el.classList.add(effect);
            console.log(el.classList);
        }
    }

    //when the user presses the filter button it will apply the first filter in the array
    document.getElementById('filterButton').addEventListener('click', changeFilter);

感谢您的宝贵时间。

Answer 1

我想就这么简单，不是吗？

var changeFilter = function () {
    ...
    var effect = filters[index++ % filters.length]
    ...
    document.getElementById('filterName').innerHTML=effect;
}

另一个建议:您最好在索引数组之前更新index变量:

index=index++ % filters.length;
var effect=filters[index];

您已正确避免索引值超出数组范围，但还必须避免index变量超出最大整数范围。

<小时/>

如果您想将某些过滤器设置为初始过滤器，我建议您通过以下步骤进行操作:

1.将所有changeFilter的逻辑(除了递增index)取出到一个新函数来更新过滤器:

function updateFilter()
{
    var el = document.getElementById('video');
    el.className = 'videoClass';

    var effect = filters[index];
    if (effect) {
        el.classList.add(effect);
        console.log(el.classList);
    }
    document.getElementById('filterName').innerHTML=effect;
}

2.替换changeFilter的主体以委托(delegate)给新函数:

var changeFilter = function () {
    index=++index  % filters.length;  // pre-increment is better
    updateFilter();
}

这样，您就将更新过滤器的操作与更改过滤器的操作分开了，以便您可以更好地重用它。

3.将索引变量正确初始化为所需的初始过滤器:

var index = 5;

4.在脚本末尾，第一次调用updateFilter。这将放置当前过滤器(最初是第 5 个索引)。