我是个菜鸟，需要一些关于功能的帮助，我认为对于你们大多数人来说这将是相当简单的。我正在尝试使用纯 Javascript 而不是 JQuery 来做到这一点。我已经尝试了几个小时但无法得到它。
我想要实现的是每次点击链接时都重复一个函数。
更具体地说，我目前的文本在单击链接时会淡入，并且我希望它始终在我单击它时执行淡入(就像您要刷新页面一样)。
基本上:单击链接 (x) -- 文本淡入 -- 单击链接 (x) -- 相同文本消失，然后从过渡/动画开始淡入(无淡出) -- 重复
我在 W3 学校遇到过一些非常类似的东西，每次单击按钮时都会显示一个从头开始的功能:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar
我认为修改它就是答案，但因为我试图更改不透明度，我发现我必须向函数添加 parseFloat 因为它是一个字符串，但我没有成功。例子是:
else { i.style.opacity = parseFloat(i.style.opacity) + .1; }
为了在作品中添加另一个 Spanner ，我使用 color:rgba(0,0,0,0) 中的不透明度值来更改不透明度。我认为这可能更容易找到，因为上面的示例(在我看来)会绕过 parseFloat 事物，就像您使用 i.style.color 但我找不到任何东西。
下面是我的代码，基于 W3 学校教程的变体。我非常确定 JS 中的clearInterval 在满足我的需要方面发挥着重要作用。非常感谢对此的任何帮助，如果您需要更多说明，请告诉我:)
<!DOCTYPE html>
<html>
<style>
#about {
color: rgba(10,10,10,0);
transition: color 1s linear 1s;
}
#about:target {
color: rgba(10,10,10,1);
transition: color 1s linear 1s;
}
</style>
<body>
<a href="#about" onclick="fadeIn()">About</a>
<div id="div">
<p id='about'> Please help me figure this out. I really appreciate it</p>
</div>
</body>
<script>
function fadeIn() {
var elem = document.getElementById("about");
var begin = 0;
var id = setInterval(frame, 10);
function frame() {
if (begin == 100) {
clearInterval(id);
} else {
begin++;
elem.style.color = begin + '1';
}
}
}
</script>
</html>
最佳答案
有一个解决方案，我不会向您展示，因为与 CSS 技巧相比，JS“hack”将花费更长的时间:(寻找适当的引用)
您将要淡入和淡出的内容包装到容器中(只需确保)并在其上方添加一个复选框:
<label for="about">About</label>
<intput type="checkbox" name="about" id="about">
<div id="about_container"> bla-bla-bla</div>
然后你设计你的东西: 隐藏复选框(标签可点击) 为您的#about_container 进行两个配置 第一个:在关闭模式下，第二个在开启模式下(您可以将它们注释掉以进行调试)
#about + #about_container
然后在第二个之前添加带有伪选择器的输入 id:
#about:checked + #about_container
打开您的开启模式，然后保持另一个模式不变。
更好、更快的解决方案!
您还应该将您的问题更改为: 如何使 html 元素在鼠标单击或其他用户交互时出现和消失。
关于javascript - 重复 javascript 函数 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42750970/