Question

以下是我正在尝试的功能：

<p id="demo"></p>
<p id="demo2"></p>
<code>
var xl = 0;
window.onload = setInterval(plusone, 1000);
function plusone(){
xl++; document.getElementById("demo").innerHTML = xl;
}
if (xl == 0){
    document.getElementById("demo2").innerHTML = "zero";
}
else if (xl == 5){
        document.getElementById("demo2").innerHTML = "5";
}
else if (xl == 7){
        document.getElementById("demo2").innerHTML = xl;
}
else if (xl == 20){
        document.getElementById("demo2").innerHTML = xl;
}
else if (xl == 19){
        document.getElementById("demo2").innerHTML = xl;
}
else
{
document.getElementById("demo2").innerHTML = "na";
}
</code>

我的目标是根据增加的时间来更改<p>块。

此处的问题是if语句不适用于递增的xl。

Answer 1

你遇到了一些你错过的括号问题，你也应该使用脚本标签而不是代码标签。这是工作代码 jsfiddle

     <p id="demo"></p>
     <p id="demo2"></p>
     <script>
     var xl = 0;
     window.onload = setInterval(plusone, 1000);
     function plusone(){
     xl++;

     if (xl == 0){
       document.getElementById("demo2").innerHTML = "zero";
     }
     else if (xl == 5){
           document.getElementById("demo2").innerHTML = "5";
     }
     else if (xl == 7){
           document.getElementById("demo2").innerHTML = xl;
     }
     else if (xl == 20){
           document.getElementById("demo2").innerHTML = xl;
     }
     else if (xl == 19){
           document.getElementById("demo2").innerHTML = xl;
     }
     else
     {
            document.getElementById("demo2").innerHTML = "na";
     }
     }
     </script>

Answer 2

代码仅在某些内容导致其运行时运行。

if语句在文档首次加载时运行，因为它们在脚本中是内联的。

您运行的时间间隔会反复运行plusone函数，该函数会更改xl的值，但您永远不会使用if语句重新运行代码。

你应该把它放在一个函数中，并在需要时调用它。

Answer 3

您将条件语句放在加载时调用的函数之外。也可以更好地使用switch-case语句来完成这类工作：

<p id="demo"></p>
<p id="demo2"></p>

<code>
    var xl = 0;
    // Anonymous function
    window.onload = function() {
               setInterval(plusone, 1000);
    }

    function plusone(){
        xl++; 
        document.getElementById("demo").innerHTML = xl;

        switch(xl) {
            case 0:
                document.getElementById("demo2").innerHTML = "zero";
                break;
            case 5:
                document.getElementById("demo2").innerHTML = "5";
                break;
            case 7: 
                document.getElementById("demo2").innerHTML = xl;
                break;
            case 20:
                document.getElementById("demo2").innerHTML = xl;
                break;
            case 19:
                document.getElementById("demo2").innerHTML = xl;
                break;
            default
                document.getElementById("demo2").innerHTML = "na";
        }
    }


</code>

Answer 4

正如他们在评论中所说，这是错误的：

window.onload = setInterval(plusone, 1000);

window.onload不在那里使用，因为它是setInterval的返回值而不是设置的函数，而是使用这样的匿名函数：

window.onload = function() { setInterval(plusone, 1000);}

然后你的if语句只执行一次，因为它不是plusOne方法的一部分（检查括号）所以一旦解析器通过你的main，它就会被执行一次。

<p id="demo"></p>
<p id="demo2"></p>

<script> 
var xl = 0;
// Proper use of anonymous function for window.onload
window.onload = function() { 
       setInterval(plusone, 1000);
}
function plusone(){
    xl++;
    document.getElementById("demo").innerHTML = xl;

    if (xl == 0){
        document.getElementById("demo2").innerHTML = "zero";
    }
    else if (xl == 5){
        document.getElementById("demo2").innerHTML = "5";
    }
    else if (xl == 7){
        document.getElementById("demo2").innerHTML = xl;
    }
    else if (xl == 20){
        document.getElementById("demo2").innerHTML = xl;
    }
    else if (xl == 19){
        document.getElementById("demo2").innerHTML = xl;
    }
    else
    {
    document.getElementById("demo2").innerHTML = "na";
    }
}
</script>

Answer 5

感谢您的回复。

我现在忘记了重新发布代码

<script>
var xl = 0;

window.onload = setInterval(plusone, 1000);
window.onload = setInterval(plustwo, 1000);


function plusone(){
xl++;
    document.getElementById("demo").innerHTML = xl;
}

function plustwo(){

if (xl == 0){
    document.getElementById("demo2").innerHTML = "zero";
}
else if (xl == 2){
        document.getElementById("demo2").innerHTML = "5";
}
else if (xl == 3){
        document.getElementById("demo2").innerHTML = xl;
}
else if (xl == 4){
        document.getElementById("demo2").innerHTML = xl;

} 
else if (xl == 5){
        document.getElementById("demo2").innerHTML = xl;
}
else
{
document.getElementById("demo2").innerHTML = "na";
}
}
</script>

在计时器上增加一次JS varible

5 个答案: