0

所以我有一个练习测试，要求我将 id 为“第四”的段落部分的背景颜色和文本颜色从黑色背景和白色文本更改为反之亦然，并最好每 30 秒反转一次，最好使用 if/else 语句。但由于某种原因，我的 If 语句（可能还有我的 else 语句）不起作用。

我到目前为止的代码是这样的：

HTML

<html>
<head>
<link href="teststyle.css" rel="stylesheet" type="text/css"/>
<script src="flash.js" type="text/javascript"></script>
</head>
<body>
<div id="first">
mares eat oats
</div>
<h1 id="second">
and does eat oats
</h1>
<p id="third">
and little lambs eat ivy
</p>
<p id="fourth">
  Mirthipan Karunakaran
</p>
</body>
</html>

CSS

#first {
 text-align: center;
}

#second {
  color: green;
  text-align: left;
}

#third {
  color: orange;
  text-align: right;
}

#fourth {
  color: white;
  background-color: black;
}

JAVASCRIPT

function updatePage(){

var name = document.getElementById("fourth");

if(name.style.backgroundColor == "black") {
 name.style.backgroundColor = "pink";

  } else {
  name.style.backgroundColor = "purple";
}

}

function startUpdate(){
  updatePage();
  window.setInterval(updatePage,10 * 1000);
}

window.onload=startUpdate;

我将如何进行这项工作？

4

5 回答 5

0

问题出在你的if statement. 你永远不会得到黑色的背景颜色。

看到这个工作JSfiddle 演示

我们应该使用 updatePage 函数：

function updatePage() {

    var name = document.getElementById("fourth");

    if (name.style.backgroundColor == "black") {
        name.style.backgroundColor = "pink";
        name.style.color = "black";
    } else {
        name.style.backgroundColor = "black";
        name.style.color = "pink";
    }
}
于 2015-10-15T03:09:25.157 回答
0

您在这里有几个问题：

  1. name是一个保留的属性名称，因此在尝试将其用作变量名称时会遇到意外行为。请参阅 为什么我不能设置 JavaScript 函数的名称属性？

  2. 正如其他人所说，由于你的逻辑，一旦背景是紫色的，它就永远不会改变。

于 2015-10-15T03:10:05.130 回答
0

这里的问题是在代码中..

默认背景颜色black最初是if条件变为真，颜色变为pink，然后当update()第二次调用函数时，if条件变为假并将 backgroundColor 设置为purple。对于第三次及以后的if条件，总是调用 else 部分，因为name.style.backgroundColor == "black"永远不会为真。

所以只使用两种颜色而不是三种颜色。

检查工作片段以了解：

function updatePage() {

  var name = document.getElementById("fourth");

  if (name.style.backgroundColor == "black") {
    name.style.backgroundColor = "white";
    name.style.color = "black";

  } else {
    name.style.backgroundColor = "black";
    name.style.color = "white";
  }

}

function startUpdate() {
  updatePage();
  window.setInterval(updatePage, 1000);
}

window.onload = startUpdate;
#first {
  text-align: center;
}
#second {
  color: green;
  text-align: left;
}
#third {
  color: orange;
  text-align: right;
}
#fourth {
  color: white;
  background-color: black;
}
<html>

<head>
  <link href="teststyle.css" rel="stylesheet" type="text/css" />
  <script src="flash.js" type="text/javascript"></script>
</head>

<body>
  <div id="first">
    mares eat oats
  </div>
  <h1 id="second">
and does eat oats
</h1>
  <p id="third">
    and little lambs eat ivy
  </p>
  <p id="fourth">
    Mirthipan Karunakaran
  </p>
</body>

</html>

于 2015-10-15T03:06:45.797 回答
0

我尝试了一些测试，最后得到了这段代码。当我使用 a 时(function(){})();，我会在页面加载的同时声明此功能。

function updatePage(){

var name = document.getElementById("fourth");
if(name.style.backgroundColor == "black") {
 name.style.backgroundColor = "purple";
console.log('teste');
  } else {
  name.style.backgroundColor = "black";
}

}

(function(){ 
  updatePage();
 window.setInterval(updatePage,3000);
})();
于 2015-10-15T03:15:24.977 回答
0

它根本没有改变吗？（如果是这样，您可能需要定义变量。）或者只是不改回来？您说它应该每 30 秒更改一次并反转，但是您拥有它的方式应该从黑色变为粉红色，但没有什么能让它变回黑色。else 语句应该说：

   else {
name.style.backgroundColor = "black";

}

这应该来回改变它。

于 2015-10-15T03:16:27.927 回答