JavaScript 调整以改变文本的阴影答案

【问题标题】：JavaScript tweaks to change shadow of textJavaScript 调整以改变文本的阴影
【发布时间】：2017-08-17 13:17:48
【问题描述】：

我需要一些关于我正在使用的 javaScript 的帮助，它可以毫无问题地更改 inner.HTML 的值。

这里是 JavaScript 函数：

    var shadowDirection = 0;

    function start()
    {
        window.setInterval(runDemo,1000);
    }

    function runDemo()
    {
        shadowDirection += 45;

        shadowText.innerHTML = "Shadow Direction: " + shadowDirection%360;

        // -->
    }

这里是 HTML。

<body onload="start()">
<h1 id="shadowText" style="position: absolute; top: 25; left:25; padding: 10; filter: drop-shadow(8px 8px 10px red)">shadow Direction: 0</h1>
</body>

目前，它会在页面加载后每秒将 Shadow Direction: "0" 的值更改 +45。

我需要补充的是，随着这个变化，它也应该每秒改变阴影方向。

应该是：

应该是1秒：filter: drop-shadow(8px 8px 10px red);

应该是2秒：filter: drop-shadow(28px 28px 10px red);

应该是3秒：filter: drop-shadow(-28px -28px 10px red);

然后回到第一秒的过滤值。

我希望一些 JS 野人能做点什么！ :D

【问题讨论】：

您可以使用 el.style.X 属性以编程方式设置 CSS 样式。

标签： javascript html css dhtml

【解决方案1】：

看看下面的例子：

var shadowDirection = 0;
var filters = [
    'drop-shadow(8px 8px 10px red)', 
    'drop-shadow(28px 28px 10px red)', 
    'drop-shadow(-28px -28px 10px red)'
];
var currentFilter = 0;

function start() {
  window.setInterval(runDemo, 1000);
}

function runDemo() {
  shadowDirection += 45;
  currentFilter = (currentFilter + 1) % filters.length;

  shadowText.innerHTML = "Shadow Direction: " + shadowDirection % 360;
  shadowText.style.filter = filters[currentFilter];
}

<body onload="start()">
  <h1 id="shadowText" style="position: absolute; top: 25; left:25; padding: 10; filter: drop-shadow(8px 8px 10px red)">Shadow Direction: 0</h1>
</body>

【讨论】：

哇！是的，就是这样。
你能告诉我你到底做了什么吗？
currentFilter = (currentFilter + 1) % filters.length;
只计算索引：0, 1, 2, 0, 1, 2 ...要知道使用哪个过滤器进行迭代。如果您向filters 添加更多内容，它也会起作用，因为它使用的是% filters.length。
@Samlano 很高兴它成功了。也请标记为答案！