如何在 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.Take 将 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.Replace changeFilter 的主体委托给新函数：

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

通过这种方式，您将更新过滤器的操作与更改过滤器的操作分开了，因此您可以更好地重用它。

3.Initialize 将索引变量正确设置为所需的初始过滤器：

var index = 5;

4.At脚本结束，第一次调用updateFilter。这将放置当前过滤器（最初是第 5 个索引）。

如何在 HTML 中显示 JavaScript 数组

How to display a JavaScript array in HTML

javascript

arrays

innerhtml

imagefilter