Question

所以当我点击按钮时，我正试图制作这个动画，其中黑色矩形边框“移开”。然而，当我第二次点击按钮时，它表现出所有奇怪的东西，两侧的矩形开始出现并迅速消失。我试图通过在动画功能完成后将按钮的onlick属性设置为空来阻止它，但它似乎不起作用。关于如何设置它只运行一次的任何想法？感谢

var W = document.body.clientWidth;

function move() {
  
    var left = document.getElementById("left");   
    var right = document.getElementById("right");
    var pos = 0;
    var id = setInterval(frame, 1);

    function frame() {
        if (pos > W/3) {
            clearInterval(id);
            document.getElementsByClassName("NavLink").onclick = "";
        } else {
            pos++; 
            left.style.left = -3*pos + 'px'; 
            right.style.right = -3*pos + 'px'; 
        }
    }
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  overflow: hidden;
}

nav{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
nav h1,a{
  color: black;
  font-family: Helvetica;
  margin-top: 2vw;
  margin-bottom: 2vw;
}
nav h1{
  margin-bottom: 6vw;
}

aside{
  position: absolute;
  width: 33vw;
  height: 100vh;
  background-color: black;
}
#left{
  left: 0;
}
#right{
  right: 0;
}

<!DOCTYPE html>
<html>
<head>
    <title>Paggo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styllo.css">
    <script type="text/javascript" src="scriptto.js"></script>
</head>
<!-- ########################################################### -->
<body>
<div id="grid">
  
  <aside id="left"></aside>
  <aside id="right"></aside>

  <nav>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
  </nav>

</div>
</body>
</html>

Answer 1

getElementsByClassName()会返回HTMLCollection。您无法直接在此集合上设置onclick。相反，您应该loop over each element in the collection。

这只解决了完成后能够再次运行动画的问题。我没有修复在它已经启动后能够再次启动动画的错误。

＆＃13;

var W = document.body.clientWidth;

function move() {
  
    var left = document.getElementById("left");   
    var right = document.getElementById("right");
    var pos = 0;
    var id = setInterval(frame, 1);

    function frame() {
        if (pos > W/3) {
            clearInterval(id);
            var navLinks = document.getElementsByClassName("NavLink");
            for (var i = 0; i < navLinks.length; i++) {
              var navLink = navLinks[i];
              navLink.onclick = "";
            }
            
        } else {
            pos++; 
            left.style.left = -3*pos + 'px'; 
            right.style.right = -3*pos + 'px'; 
        }
    }
}

＆＃13;

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  overflow: hidden;
}

nav{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
nav h1,a{
  color: black;
  font-family: Helvetica;
  margin-top: 2vw;
  margin-bottom: 2vw;
}
nav h1{
  margin-bottom: 6vw;
}

aside{
  position: absolute;
  width: 33vw;
  height: 100vh;
  background-color: black;
}
#left{
  left: 0;
}
#right{
  right: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Paggo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styllo.css">
    <script type="text/javascript" src="scriptto.js"></script>
</head>
<!-- ########################################################### -->
<body>
<div id="grid">
  
  <aside id="left"></aside>
  <aside id="right"></aside>

  <nav>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
    <button onclick="move()" class="NavLink"> Link </button>
  </nav>

</div>
</body>
</html>

＆＃13;

如何防止js动画再次发生

1 个答案: