使用 className 方法和 setInterval 创建重复的淡出效果
[英]Create repeated fade-out effect by using className Method and setInterval
问题描述
亲爱的，
我有一个任务是通过使用 setInterval 和使用 DOM className 方法来创建重复的淡出效果，下面是我的代码：
<!DOCTYPE html>
<html>
<style>
.mystyle {
background-color: coral;
padding: 16px;
opacity: 0;
transition: opacity 1s linear;
}
</style>
<body>
<div id="myDIV"></div>
<p>Click the button to set a class for myDIV:</p>
<button onclick="setInterval()">Try it</button>
<script>
setInterval(change, 2000)
function change() {
function subchange1(){
document.getElementById("myDIV").className = "mystyle";
};
function subchange2(){
document.getElementById("myDIV").className = "";
};
}
</script>
</body>
</html>
但是，它根本没有显示任何变化，你能告诉我我哪里出错以及如何纠正它吗？ 非常感谢
3 个解决方案
解决方案1
0 2022-07-23 08:49:05
- 您已将
setInterval()用作用户定义的函数。 它需要两个参数，一个是回调函数，另一个是时间间隔。 您应该已经在 JS 中使用并删除了setInterval。
<button onclick="setInterval(change, 2000)">Try it</button>
在
change()函数中，您刚刚声明了这些函数。 你没有给他们回电话。 即使您调用它们，它也不会给您预期的输出。要使您的代码正常工作，您需要检查
myDiv是否具有类.mystyle。 为此，您需要使用if-else语句。
这是一个工作代码： -
let myDiv = document.getElementById("myDIV"); function change() { if (myDiv.className === "mystyle") { myDiv.className = ""; } else { myDiv.className = "mystyle"; } } function startAnimation() { setInterval(change, 2000); };
#myDIV { background-color: #1a8cff; padding: 16px; transition: opacity 1s linear; } .mystyle { background-color: coral; opacity: 0; }
<div id="myDIV"></div> <p>Click the button to set a class for myDIV:</p> <button onclick="startAnimation()">Try it</button>
解决方案2
0 2022-07-23 08:52:25
由于这是您必须完成的任务，因此我将仅列出我注意到的问题，并让您将其作为练习来解决。
您在
<html>中有一个<style>标签。 您应该在<head>元素中包含该样式。<script>标签内调用的代码函数会直接立即执行。 您正在直接调用setInterval(change, 2000)，因此无需将其添加到<button>标记中。 如果您希望重复操作仅在您按下按钮时开始，您需要调用 setInterval，此行setInterval(change, 2000)，在另一个函数内部，例如start。 然后像这样将start添加到 onclick：onclick="start()"。change函数中有 2 个函数声明，但没有函数调用。 这意味着其中的两个函数subchange1和subchange2永远不会被调用。 要使用一个函数，你需要调用它。 您应该将这两个函数移到外部，在change函数之后，然后您可以使用subchange1()和subchange2()调用它们。
这将解决您的代码问题，但没有正确的逻辑来实现功能要求。 您可以搜索class toggle function并找到不同的方法。 我建议选择与您已经学过的内容更匹配的那个。
这看起来像是一项中高级任务。 解决这些问题的最佳方法是从简单的开始并在您进行时测试您的代码。 编写所有内容并进行测试将非常困难。 我强烈建议您编写一个简单的函数调用，例如alert(7) ，然后将其添加到按钮中，测试按钮，然后将其添加到函数中，使用按钮测试函数，然后将其与setInterval一起使用。 这将确保您在增加更多复杂性之前让事情正常进行。
祝你任务顺利:)
解决方案3
0 2022-07-26 05:15:45
经过一番研究，我发现这是 Javascript 代码的异步性质的高度原因，我发现使用 setTimeout 可以克服这个问题，我的代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
background-color: coral;
padding: 16px;
opacity: 0;
transition: opacity 1s linear;
}
</style>
</head>
<body>
<div id="myDIV" >
<p>I am myDIV.</p>
</div>
<p>Click the button to set a class for myDIV:</p>
<button onclick="change()">Try it</button>
<script>
function change(){
let abc = document.getElementById("myDIV");
abc.className = "mystyle";
setTimeout(function() {abc.className = "";}, 1000);
setTimeout(change, 2000);
};
</script>
</body>
</html>
如何在 Jquery 中创建窗帘淡出效果？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.