为javascript代码创建一个循环

我想为下面的js代码创建一个循环。请帮帮我

function fade90() { document.getElementById("myDiv").style.opacity="0.90"; setTimeout("fade80()", 100); }
function fade80() { document.getElementById("myDiv").style.opacity="0.80"; setTimeout("fade70()", 100); }
function fade70() { document.getElementById("myDiv").style.opacity="0.70"; setTimeout("fade60()", 100); }
function fade60() { document.getElementById("myDiv").style.opacity="0.60"; setTimeout("fade50()", 100); }
function fade50() { document.getElementById("myDiv").style.opacity="0.50"; setTimeout("fade40()", 100); }
function fade40() { document.getElementById("myDiv").style.opacity="0.40"; setTimeout("fade30()", 100); }
function fade30() { document.getElementById("myDiv").style.opacity="0.30"; setTimeout("fade20()", 100); }
function fade20() { document.getElementById("myDiv").style.opacity="0.20"; setTimeout("fade10()", 100); }
function fade10() { document.getElementById("myDiv").style.opacity="0.10"; setTimeout("hide()", 100); }

我写这个。这是正确的吗？如果没有，请解决这个问题

function cls_msg(){
    for (var i=1;i<10;i++)
    {
    setTimeout(document.getElementById("myDiv").style.opacity=100-(i*10), 100);
    }
}

函数cls\u msg（）{
对于（var i=1；i我不确定你在问什么，但我可以建议一些更整洁的吗

function fade(n, el) {
  el.style.opacity = n;
  n = n - 0.1;
  if (n.toFixed(1) > 0) {setTimeout(function() {fade(n, el);},100);}
  else {setTimeout(function() {hide(el);}, 100);}
}

function hide(el) {
  el.style.visibility='hidden';
}

然后开始打电话

fade(0.9, document.getElementById("myDiv"));

例如：
在回答您的实际问题之前，我会为您提供一个更合适的解决方案，以解决您的褪色问题，因为您试图做得过于复杂

您只需修改实际值并将其重新分配给样式，无需调用所有这些方法并重新查询DOM

function fadeIn( node, v ) {
    node.style.opacity = v || 1;

    if( v < 1 ) {
        setTimeout( fadeIn.bind( null, node, v + 0.1 ), 25 );
    }
 }

function fadeOut( node, v ) {
    node.style.opacity = v || 1;

    if( v > 0 ) {
        setTimeout( fadeOut.bind( null, node, v - 0.1 ), 25 );
    }
}

如果不需要支持带有动画的传统浏览器，那么让浏览器/css转换来完成这项工作可能是一个更好的主意

function fadeIn( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 1;
}

function fadeOut( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 0;
}

[ fade90, fade80, fade70, fade60,
  fade50, fade40, fade30, fade20,
  fade10, hide ].forEach(function( method, i, arr ) {
      setTimeout(function() {
          if( typeof arr[ i+1 ] === 'function' ) {
              !i && method();
              setTimeout( arr[ i+1 ], 25 * i );
          }
      }, 25);
});

请注意，您可能不仅要设置transition，还要为“不太传统”的浏览器设置所有特定的浏览器供应商前缀，如-ms transition、-moz transition等


为了最终回答这个问题，您应该使用一个数组在多个函数上循环，这可能看起来像

function fadeIn( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 1;
}

function fadeOut( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 0;
}

[ fade90, fade80, fade70, fade60,
  fade50, fade40, fade30, fade20,
  fade10, hide ].forEach(function( method, i, arr ) {
      setTimeout(function() {
          if( typeof arr[ i+1 ] === 'function' ) {
              !i && method();
              setTimeout( arr[ i+1 ], 25 * i );
          }
      }, 25);
});

请注意，您还应该重新编写这些方法，这些方法不应该为自己调用
setTimeout
，也不应该重新查询目标节点。我只是想给您一个示例说明我的方法。
为什么要尝试？
while（IDoNotUnderstandIt（））{learnJavascript（）；}
我知道你为什么想要一个循环。@克里斯，但我对人性的信心…已经降到了历史最低点。再一次…我开始看到一种趋势…这是我见过的最史诗般的代码更改
…隐藏一些东西？
到
文档.getElementById（“myDiv”）.style.visibility='hidden'；
为什么要设置
隐藏（）
？使用
不透明度==0
它无论如何都不可见，因此您可以立即隐藏它。@DanLee下次不透明度将为0。请注意
n=n-0.1；
，然后检查
如果（n！=0）
.Opacity永远不会设置为0。小心。这个循环永远不会结束。浮点算术问题。
n
永远不会等于
0
@thesystem Then@CJ。应该将
if（n！=0）
更改为类似
if（n>.0001）
？+1，优雅，很好，或者您可以跳过
.bind（）
，然后执行
设置超时（fadeIn，25，node，v+0.1）；
它需要一个垫片，但
.bind（）也需要垫片
.But+1.@system:True，我喜欢忘记
setTimeout
有一个隐含的咖喱机制。但是正如你提到的，它也不是跨浏览器的。嗯……你在上一个例子中把我弄丢了。首先，你忘了定义
I
，但是很容易修复。除此之外，似乎索引
0-8
方法都会在之后被调用
25ms
，然后方法
1-9
都将在以后调用
25ms
。因此，您将调用其中的大多数方法两次，并且不会错开它们的调用。如果我错了，请纠正我。也许您打算使用
if/else
进行调用，使用
*I
进行
setTimeout
s？…我可能会别糊涂了。