setTimeout命令

Question

我想setTimeout()遇到问题。

您可以访问我的网页，查看我所在的位置：http://verbum.xtrweb/soon.php

问题是我有2个文本字段。

1. 使用id="Verbum"
的“Verbum”
2. 使用id="forget"
“忘记单次搜索”

我希望在小字典下降后应用淡入效果（请参阅我上面的网站链接以便您理解）。我也改变了函数的名称和变量，但唯一发生的事情是只有一个文本淡入，并且它取决于哪一个低于另一个。没有淡入的那个甚至没有出现。希望你理解并找到并回复。感谢。

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var elem = document.getElementById("Verbum");
    elem.style.display = 'inline';
    elem.style.filter = "alpha(opacity = " + alpha + ")";
    elem.style.opacity = opac;

    setTimeout("fadein()", 8500);
  }

  function fadein() {
    var elem = document.getElementById("Verbum");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    elem.style.opacity = opac;
    elem.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      //Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }
  window.onload=init;
</script>

这是第二个<script>块：

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
  }

  function fadein() {
    var eleme = document.getElementById("forget");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    eleme.style.opacity = opac;
    eleme.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      // Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }

  window.onload = init;
</script>

Answer 1

问题是你只能将一个功能分配给window.onload一次。最后一个将始终优先于第一个。

您可以使用window.onload告诉浏览器在页面加载时运行您的代码，而不是使用window.addEventListener。你可以像这样使用它。

window.addEventListener('load', function(){
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
}, false);

您需要复制并粘贴两次，一次用于“忘记”，另一次用于“Verbum”。

另外，我建议更改fadein函数的名称，或者将要淡化的元素作为参数传递。否则你的代码将只运行最后的fadein函数，“忘记”或“Verbum”将正常工作，而另一个则不会。