Question

我的代码使此形状不断从绿色变为蓝色，只需按一下按钮，即可自动更改

<html>
        <head>
        <script>		
			function functionl() {
  Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
  Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}

helper = (e) => {
  if (e.innerText == 'Hi') {
    e.style.backgroundColor = 'blue';
    e.innerText = 'Hello';
  } else {
    e.style.backgroundColor = 'green';
    e.innerText = 'Hi';
  }
}
		</script>
        <style>
         .L1 
        {
          padding: 0px;
          border: 1px;
          border-radius: 200% 0px 200% 0px;
          border-color: green;
          background-color: green;
          font-size: 50px;
          color: white;
          width: 50%;
          height: 47%;
        }
                
        .L2 
        {
          padding: 0px;
          border: 1px;
          border-radius: 0px 200% 0px 200%;
          border-color: green;
          background-color: green;
          font-size: 50px;
          color: white;
          width: 50%;
          height: 47%;
        }
                
         .button1 
        {
           height=5%;
           font-size: 35;
           background-color: Red;
           color: blue;
           border-radius: 30px 30px 30px 30px;
        }
        </style>
        </head>

        <body>
        <button class="L2">Hi</button><button class="L1">Hi</button><br>
        <button class="L1">Hi</button><button class="L2">Hi</button>
        <center><button class="button1" onclick="functionl()">Click me</button></center>
        </body>

        </html>

它可以与按钮一起使用，但我希望它可以作为gif来自动在绿色和蓝色Hello之间循环播放（并请考虑添加如何停止该循环或通过按钮开始播放）

Answer 1

使用window.setInterval如下。您可以更改数字（500）来更改时间。时间以毫秒为单位。

function functionl() {
  Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
  Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}
helper = (e) => {
  if (e.innerText == 'Hi') {
    e.style.backgroundColor = 'blue';
    e.innerText = 'Hello';
  } else {
    e.style.backgroundColor = 'green';
    e.innerText = 'Hi';
  }
}

window.setInterval(functionl, 500);

.L1 {
  padding: 0px;
  border: 1px;
  border-radius: 200% 0px 200% 0px;
  border-color: green;
  background-color: green;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.L2 {
  padding: 0px;
  border: 1px;
  border-radius: 0px 200% 0px 200%;
  border-color: green;
  background-color: green;
  font-size: 50px;
  color: white;
  width: 50%;
  height: 47%;
}

.button1 {
  height=5%;
  font-size: 35;
  background-color: Red;
  color: blue;
  border-radius: 30px 30px 30px 30px;
}

<html>

<head>
</head>

<body>
  <button class="L2">Hi</button><button class="L1">Hi</button><br>
  <button class="L1">Hi</button><button class="L2">Hi</button>
  <center><button class="button1" onclick="functionl()">Click me</button></center>
</body>

</html>

如何使html运行没有开头或结尾的代码？

1 个答案: