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>

目前，只要页面加载，它就会将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

Answer 1

看一下以下示例：

＆＃13;

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];
}

＆＃13;

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

＆＃13;

JavaScript调整以改变文本的阴影

1 个答案: