Question

我在其他帖子中寻找答案，但答案似乎对我不利。当页面完成加载时，我试图使图像淡出。我发现我可以循环直到计数器达到0（当图像不可见时）并慢慢淡化图像。

问题是，setTimeout（）函数似乎不起作用。这是代码：

＆＃13;

function timeout() {
    setTimeout(function () {
      //A comment said something about looping,
      //but it was confusing to understand...
    }, 50);
}

function setup() {
  var load = document.getElementById('img');
  load.style.opacity = 0 //Start at being visible
  for (var i = 10; i > 0; i = i - 0.1) { //For loop
    load.style.opacity = i; //Use the index variable and use that to set the opacity
    setTimeout(); //Set the timeout, but this function does not pause the program for some reason...
    //I need to pause for 0.05 seconds.
  }
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
    </head>
    <body>
      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>
    </body>
</html>

＆＃13;

＆＃13; 我把javascript放在一个单独的文件中，我只是无法从Stack Overflow访问它...

有人可以帮忙吗？而且，有时候图像也有时很挑剔，就像有时它不会像它应该做的那样躲起来。谢谢！

Answer 1

您声明了setTimeout没有参数，因此错误：

'Window': 1 argument required, but only 0 present."

给它适当数量的参数：

for (var i = 10; i > 0; i = i - 0.1) { //For the loop
    load.style.opacity = i; 
    setTimeout(functionName, milliseconds); 
}

如果您打算使用timeout()功能，请拨打电话。您只是从已在setTimeout函数中创建的timeout()实例化新prompt = ">>" from tkinter import * root = Tk() userName = Entry() myLabel = Label(root, text="UserName") userName.grid(row=0) myLabel = Label.grid(row=0, column=1) root.mainloop()。

Answer 2

基本上你想用递归调用来倒计时不透明度。这里我们以0.01为增量从1下降到0。暂停50毫秒后，setTimeout将触发下一个递归调用。这些值当然可以根据需要进行调整，但不透明度必须是从1（可见）到0（不可见）的数字。

function setOpacity(el, lvl) {
 el.style.opacity = lvl;
}

function countDown(el, lvl) {
  function action(el, lvl) {
    return function () {
      countDown(el, lvl);
    }
  }
  setOpacity(el, lvl);
  if (lvl > 0) {
    lvl -= 0.01
    setTimeout(action(el, lvl), 50);
  }
}

function setup() {
  var load = document.getElementById('img');
  load.style.opacity = 1; //Start at being visible
  countDown(load, 1);
}

window.addEventListener('load', setup, true);

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
    </head>
    <body>
      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>
    </body>
</html>

Answer 3

您可以使用递归函数而不是循环

＆＃13;

var load = document.getElementById('img');

function setup() {
  load.style.opacity = "1"; //Start at being visible

  timeout(1);
}

function timeout(i) {
  setTimeout(function() {
    i -= 0.1;
    if(i<=0)
      return;
    load.style.opacity = i.toString();
    timeout(i);
  }, 200);
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Webpage</title>
</head>

<body>
  <div>
    <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150" id="img">
  </div>
</body>

</html>

＆＃13;

Answer 4

＆＃13;

function setup() {
	var load = document.getElementById('img');
	(function(){
		var i = 1;
		setTimeout(function () {
			i -= 0.1;
			load.style.opacity = i;
			if (i > 0) {
				setTimeout(arguments.callee, 100);
			}
		}, 100);
	})();
}

window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

＆＃13;

      <div id="img">
        <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
      </div>

＆＃13;

JavaScript超时功能

4 个答案: