我是为正在创建的网站编写此Javascript的,我不确定为什么代码会自动运行,我的解决方案之一是编写一个函数/创建一个计时器,以便代码在我希望的时间运行。

这是js:

var introCap = document.getElementById("captionCol");
var imgDiv = document.getElementById("imgCol");
var introDiv = document.getElementById("intro");
var expose = document.getElementById("gotoPage");
var fade = 1;
var l = 15;
var r = 45;

//expose.onclick = move; this is commented out for the time being.

function stop() {
    clearInterval(moveInt);
    clearInterval(fadeInt);
    }

function fadeOut() {
   fade -= 0.07;

   introDiv.style.opacity = fade;
   introDiv.style.filter = "alpha('"+fade+"')";
   if(introDiv.style.opacity<0) {
        stop();
       }
    }
    var fadeInt = setInterval("fadeOut()", 60);

function move() {
    l -= 0.1;
    r +=  0.1;

    introCap.style.left = r+"%";
    imgDiv.style.left = l+"%";

    if (imgDiv.style.left<10) {
    fadeOut();
    }
   }
   var moveInt = setInterval("move()", 70);


这是相应的html:

<div id="intro">

        <div id="imgCol"></div>

        <div id="captionCol">
            <p> Hi, I'm <b>Jenny Spring</b>. <br><br>
            I'm a <span id="emp">SPIN</span> farmer. </p>
    </div>

    <p><a href="#" id="gotoPage">Go To</a></p> <!-- this link will be changed to a button later but is being used as is temporarily.

</div>


有人能说出代码为什么会自动执行吗?

谢谢!

最佳答案

setInterval()不仅设置间隔,而且在每个间隔后调用该函数。因此,在准备好调用它之前,请不要使用此函数。另一个功能setTimeout()可用,该功能仅执行一次。

例如,您可以将间隔调用移至函数start()并使用href充当开始按钮

function start() {
    var moveInt = setInterval("move()", 70);
    var fadeInt = setInterval("fadeOut()", 60);
}

<p><a href="javascript:start();" id="gotoPage">Go To</a></p>


资料来源:http://www.w3schools.com/js/js_timing.asp

09-10 10:48
查看更多