gpt4 book ai didi

JavaScript 调整以更改文本的阴影

转载 作者:太空宇宙 更新时间:2023-11-04 08:57:41 26 4
gpt4 key购买 nike

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

最佳答案

看看下面的例子:

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 调整以更改文本的阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43002247/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com