JavaScript 调整以更改文本的阴影

Question

我需要一些关于我正在使用的 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>

目前，它会在加载页面后每秒将阴影方向：“0”的值更改 +45。

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

应该是：

1 second it should be: filter: drop-shadow(8px 8px 10px red);

2 second it should be: filter: drop-shadow(28px 28px 10px red);

3 second it should be: filter: drop-shadow(-28px -28px 10px red);

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

我希望一些 JS 野蛮人可以为此做点什么！ :D

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

JavaScript 调整以更改文本的阴影

JavaScript tweaks to change shadow of text

html

javascript

css

dhtml