重复 javascript 函数 onclick答案

【问题标题】：Repeating javascript functions onclick重复 javascript 函数 onclick
【发布时间】：2017-08-02 17:19:15
【问题描述】：

我是一个完全的菜鸟，需要一些关于我认为对你们大多数人来说非常简单的功能的帮助。我正在尝试使用纯 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; }

为了在工作中添加另一个扳手，我使用 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>

【问题讨论】：

标签： javascript onclick opacity fadein parsefloat

【解决方案1】：

有一个解决方案，我不会向您介绍，因为与 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 元素在鼠标单击或其他用户交互时出现和消失。

【讨论】：

NO-JS 示例：样式转换器：sitepoint.com/… 显示更多-更少功能：sitepoint.com/… 消失的菜单：sitepoint.com/pure-css-off-screen-navigation-menu
刚试过但不是这样。不过我确实喜欢 :) 谢谢 Mihail
如果你真的“需要”一个函数来触发点击，并根据某些状态采取不同的行动：定义状态（伪属性或类）然后从函数内部检查状态并决定它......但不要将它用于样式（消失的菜单等）

【解决方案2】：

您可以使用过渡，然后将不透明度设置为 0.5，并在几毫秒后将其更改为 1，使其在单击时淡出并返回旧外观

编辑：

只需将fadeIn() 放在另一个函数中，在fadeIn() 执行之前将不透明度设置为0

编辑：

doIt = function() {
document.getElementById("about").style.color = begin + '0';
fadeIn();
}

HTML

<a href="#about" onclick="doIt()">About</a>

【讨论】：

感谢您回复马可。不过我应该清楚一点。这应该发生在 1 单击。所以理论上，应该没有淡出，而是重新启动功能。我的问题中的 W3 学校示例是我能找到的最接近的示例。
所以如果我理解的话，你需要点击时的淡入淡出，但你希望它在没有淡入效果的情况下将不透明度恢复为 1？
因此，当点击链接时，它会从 0 不透明度变为 1。当再次点击相同的链接时，理想情况下它应该从 0 不透明度开始到 1 - 完全相同。在再次执行转换之前，文本应该基本上消失片刻。我认为这是通过设置间隔和清除间隔完成的，但我真的不知道。
答案已编辑，如果你想看看，它应该是你需要的解决方案
嗨，Marco，我尝试了我认为可能正确的方法，但老实说，我不确定你的意思。我对这一切都很陌生，所以请多多包涵。如果不是太麻烦，你介意让我看看吗？谢谢