所以我试图制作这个动画，当我点击按钮时，侧面的黑色矩形“移到一边”。然而，当我第二次点击按钮时，它表现得很奇怪，边上的矩形开始快速出现和消失。我试图通过在动画功能完成后将按钮的 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>最佳答案
getElementsByClassName()返回 HTMLCollection .您不能直接在此集合上设置 onclick。相反，你应该 loop over each element in the collection .
这仅解决了动画完成后能够再次运行的问题。我没有修复已经开始播放后可以再次播放动画的错误。
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';
}
}
}*{
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>关于javascript - 如何防止js动画再次发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50238737/