Question

在使此代码正常工作时，我需要帮助，以便在单击/悬停所需的按钮时显示不同的颜色和消息

我想：

将鼠标悬停在按钮'colours'上时，更改页面的背景
单击按钮'msg'时显示一条消息

我是一个初学者，我不知道代码实际上有什么问题，但是我所知道的只是函数无法自行启动

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<script language="javascript">
  function f1() {
    document.bgcolor = "blue";
    window.setTimeout("f2", 1200);
  }

  function f2() {
    document.bgcolor = "indigo";
    window.setTimeout("f3", 1200);
  }

  function f3() {
    document.bgcolor = "voilet";
    window.setTimeout("f4", 1200);
  }

  function f4() {
    document.bgcolor = "green";
    window.setTimeout("f5", 1200);
  }

  function f5() {
    document.bgcolor = "purple";
    window.setTimeout("f6", 1200);
  }

  function f6() {
    document.bgcolor = "yellow";
    window.setTimeout("f7", 1200);
  }

  function f7() {
    document.bgcolor = "orange";
    window.setTimeout("f8", 1200);
  }

  function f8() {
    document.bgcolor = "red";
    window.setTimeout("f1", 1200);
    f1();
  }

  function msg() {
    window.status = "display 7 distinct colours"
  }
</script>

<body>
  <center>
    <input type="button" name="b1" value="colors" onMouseOver="f1()">
    <input type="button" name="b2" value="msg" onClick="msg()">
  </center>
</body>

</html>

Answer 1

我认为这就是您要寻找的。有点不同，但是使用JS将报告“超出最大调用堆栈跟踪”错误，该错误不能以任何方式绕过我所看到的。作为一种解决方法，我使用CSS动画创建了一个内联CSS样式表，该样式每1200毫秒进行一次相同的颜色更改，但是该按钮将启用样式表而不是设置颜色。默认情况下，样式表是禁用的。

此外，由于所有浏览器都不支持window.status，我将其更改为受支持的window.alert。

  <!DOCTYPE html>
  <html>
  <head>
      <title>Colors</title>
  </head>
  <script language="javascript">
  window.onload = function() {
      document.getElementById("style").disabled=true;
  }
  function colors()
  {
      document.getElementById("style").disabled=false;
  }
  function msg()
  {
      window.alert("display 7 distinct colours");
  }
  </script>
  <body>
  <style id="style">
      body {
          animation-duration: 8400ms;
          animation-name: bgcolorchange;
          animation-iteration-count: infinite;
          animation-timing-function:steps(1, end);
      }
      @keyframes bgcolorchange {
          0% {
              background-color: blue;
          }
          12.5% {
              background-color: indigo;
          }
          25% {
              background-color: violet;
          }
          37.5% {
              background-color: green;
          }
          50% {
              background-color: purple;
          }
          62.5% {
              background-color: yellow;
          }
          75% {
              background-color: orange;
          }
          87.5% {
              background-color: red;
          }
          100% {
              background-color: blue;
          }
    }
    </style>
    <center>
        <input type="button" name="b1" value="colors" onMouseOver="colors()">
        <input type="button" name="b2" value="msg" onClick="msg()">
    </center>
</body>

</html>

Answer 2

这可能是您想要的

下面的纯简单Javascript-

  var bx = document.body;
  var colorArr = ["blue", "indigo", "voilet", "green", "purple", "yellow", "orange", "red"];
  var counter = 0;
  var ifHover = false;
  var interval;

function changeClr() {
  if(ifHover != true) return;
  bx.style.background = colorArr[counter];
  counter++;
  if(counter==colorArr.length) counter=0;
  interval = setTimeout(changeClr, 1200);
}

function startClr(){ ifHover = true; clearInterval(interval); changeClr(); }

function stopClr(){ ifHover = false; }

function msg() {
  alert("display 7 distinct colours");
}

<center>
  <input type="button" onmouseover="startClr()" onmouseout="stopClr()" value="color">
  <input type="button" onclick="msg()" value="msg">
</center>

单击/悬停按钮时显示不同的颜色和消息

2 个答案: