Question

我是一个完整的初学者，所以如果我的代码没有任何意义，我提前道歉！看着它可能会很头疼。我正在尝试做一个神奇的 8 球项目，现在我一直在通过每次点击按钮使 8 球图像抖动。动画只执行一次，然后我必须再次刷新它。我还将另一个功能连接到按钮，它会给出随机答案，我对此没有任何问题。我希望它在每次点击时同时摇晃并给出答案。我该怎么做？

HTML、CSS 和 JS：

.shakeutton {
  position: absolute;
  bottom: 70%;
  left: 570px;
  width: 7%;

}
.head {
  position: relative;
  margin: auto;
  text-align: center;
  margin-bottom: 500px;
}

.shake {
  animation: shake 0.5s;

  animation-iteration-count: 2;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Magic 8 Ball</title>
</head>

<body>
  <div style='position: absolute; bottom:20%'>
    <img id='imgSh' src='magic-8-ball-8-ball-pool-eight-ball-crystal-ball-8__1_-removebg-preview.png' width='350px'; height='350px';/>
  </div>
  <h2 class='head'>Ask Me Anything And Click Shake</h2>
  <button id='shakeButton' class='shakeutton'>Shake</button>
  <div  style='position: absolute; bottom:250px; left:500px'>
    <p id='answer'></p>
  </div>

  <input type='text' style='position:absolute; left:458px; bottom:80%; width:25%; height:5%'/>

<script>
    let x = document.getElementById('shakeButton')
    x.addEventListener('click', ff);
    x.addEventListener('click', ansAppear)
    x.addEventListener('click', ballSh)

    function ansAppear() {
      document.getElementById('answer').innerHTML = fortune[finalFortune];
    }

    let fortune = ['As I see it, yes.', 'Ask again later.', 'Better not tell you now.',
  'Cannot predict now.', 'Concentrate and ask again.', 'Don’t count on it.','It is certain.',
'It is decidedly so.', 'Most likely.', 'My reply is no.','My sources say no.',
'Outlook not so good.', 'Outlook good.', 'Reply hazy, try again.', 'Signs point to yes.',
'Very doubtful.', 'Without a doubt.', 'Yes.', 'Yes – definitely.', 'You may rely on it.']

  function ff() {
    globalThis.finalFortune = Math.floor(Math.random()*fortune.length)
    console.log(fortune[finalFortune])
  }
  console.log(ff())

  function ballSh() {
    document.getElementById('imgSh').classList.add("shake");
    }


</script>

Answer 1

您可以在 animationend 元素上使用 imgSh 事件，只需在其上切换 shake 类即可。

将您的 ballSh 函数修改为 toggle 而不是 add。

当然，您也可以使用单独的处理程序来删除 shake 类（您在 animationend 事件中注册）并保留 ballSh 函数仅用于 < strong>添加 shake 类，但这取决于您。

 
    let x = document.getElementById('shakeButton')
    let ballSHEle = document.getElementById('imgSh')
    x.addEventListener('click', ff);
    x.addEventListener('click', ansAppear)
    x.addEventListener('click', ballSh)
    ballSHEle.addEventListener('animationend',ballSh);

    function ansAppear() {
      document.getElementById('answer').innerHTML = fortune[finalFortune];
    }

    let fortune = ['As I see it, yes.', 'Ask again later.', 'Better not tell you now.',
  'Cannot predict now.', 'Concentrate and ask again.', 'Don’t count on it.','It is certain.',
'It is decidedly so.', 'Most likely.', 'My reply is no.','My sources say no.',
'Outlook not so good.', 'Outlook good.', 'Reply hazy, try again.', 'Signs point to yes.',
'Very doubtful.', 'Without a doubt.', 'Yes.', 'Yes – definitely.', 'You may rely on it.']

  function ff() {
    globalThis.finalFortune = Math.floor(Math.random()*fortune.length)
    console.log(fortune[finalFortune])
  }
  console.log(ff())

  function ballSh() {
    document.getElementById('imgSh').classList.toggle("shake");
    }

.shakeutton {
      position: absolute;
      bottom: 70%;
      left: 570px;
      width: 7%;

    }
    .head {
      position: relative;
      margin: auto;
      text-align: center;
      margin-bottom: 500px;
    }

    .shake {
  animation: shake 0.5s;

  animation-iteration-count: 2;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Magic 8 Ball</title>
</head>

<body>
  <div style='position: absolute; bottom:20%'>
    <img id='imgSh' src='magic-8-ball-8-ball-pool-eight-ball-crystal-ball-8__1_-removebg-preview.png' width='350px'; height='350px';/>
  </div>
  <h2 class='head'>Ask Me Anything And Click Shake</h2>
  <button id='shakeButton' class='shakeutton'>Shake</button>
  <div  style='position: absolute; bottom:250px; left:500px'>
    <p id='answer'></p>
  </div>

  <input type='text' style='position:absolute; left:458px; bottom:80%; width:25%; height:5%'/>

Answer 2

删除并重新添加“shake”类可能会起作用。

function ballSh() {
  document.getElementById('imgSh').classList.remove("shake").add("shake");
}

如何在每次单击按钮时重复抖动动画？简单的JS

2 个答案: