JavaScript眨眼动画

我目前正在尝试学习JavaScript并尝试很多东西，但到目前为止，我的JS技能仍然非常有限。 我创建了一个小游戏，其中有一个随机出现的兔子头框，用户必须尽快点击它们

因此，我用一个间隔动画创建了兔子，在这个动画中，兔子每2秒钟闭上眼睛，然后睁开眼睛。 现在我觉得自己有点傻，但我无法让动画按我所希望的那样工作。现在兔子每2秒闭上眼睛，然后每2秒再睁开眼睛。但是，我只想让它眨眼，这意味着眼睛应该闭上一瞬间，然后再睁开，这样兔子每2秒眨眼一次。 然后，我也希望它随机地，有时只眨眼一次，有时眨眼两次。 我不确定这是否很简单，我只是因为数小时的编码和学习新东西而失明，但我似乎需要你的帮助

整个事情现在的样子

您可以看到小提琴内部使用的完整代码。我不想在这里的代码部分张贴整个网站，但我相信我的动画感兴趣的部分

以下是用于眨眼的js代码：

var eyeleft = document.getElementById("eyeleft");
var eyeright = document.getElementById("eyeright");

window.onload = setInterval(function() {
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
    }, 2000);

接下来是HTML

<div id="shape" class="game-shapes">
    <div class="ears left"></div>
    <div class="ears right"></div>
    <div id="eyeleft" class="eyeleft"></div>
    <div id="eyeright" class="eyeright"></div>
    <div id="mouth">
        <div id="tooth"></div>
        <div id="tongue"></div>
    </div>
</div>

---

有很多方法可以做到这一点，这里是我的-只需在你的时间间隔中添加一个超时，这样时间间隔就可以完成整个闪烁动作

---

谢谢你的提问，有很多细节

这里有一个潜在的解决方案，既可以提供快速闪烁，也可以提供随机第二次闪烁

//made blink a named function to improve readability a bit
var blink = function(isSecondBlink) {
  //got rid of the ternary expressions since we're always doing
  //open eyes -> close eyes -> delay -> open eyes

  //close both eyes
  eyeleft.className = "closedeyeleft";
  eyeright.className = "closedeyeright";

  //let's reopen those eyes after a brief delay to make a nice blink animation
  //as it happens, humans take ~250ms to blink, so let's use a number close to there
  setTimeout(function() {
      eyeleft.className = "eyeleft";
      eyeright.className = "eyeright";
  }, 200);

  if (isSecondBlink) { return; } //prevents us from blinking 3+ times

  //This provides a 40% chance of blinking twice, adjust as needed
  var blinkAgain = Math.random() <= 0.4;

  //if we need to blink again, go ahead and do it in 300ms
  if (blinkAgain) {
    setTimeout(function() { blink(true); }, 300);
  }
}

//go ahead and blink every 2 seconds
window.onload = setInterval(blink, 2000);

//使blink成为一个命名函数以稍微提高可读性
变量闪烁=功能（IsSecondLink）{
//摆脱了三元表达式，因为我们总是这样做
//睁开眼睛->闭上眼睛->延迟->睁开眼睛
//闭上双眼
eyeleft.className=“closedeyeleft”；
eyerRight.className=“closedeyeright”；
//让我们在短暂的延迟后重新打开眼睛，制作一个漂亮的眨眼动画
//事实上，人类眨眼大约需要250毫秒，所以让我们用一个接近这个数字
setTimeout（函数（）{
eyeleft.className=“eyeleft”；
eyerRight.className=“eyerRight”；
}, 200);
if（isSecondBlink）{return；}//阻止我们闪烁3次以上
//这提供了40%的机会闪烁两次，根据需要进行调整
var blinkreach=Math.random（）这里是JSFIDLE
这是我将如何做，所以它将是真正随机的，但仍然看起来不错


所以随机呼叫关闭，然后在100后再次打开它们
我喜欢随机第二次闪烁：）如果有人想检查太多，这里有一把小提琴哇哈哈，我忘了将我的mods发布到小提琴上。谢谢mx！非常感谢快速帮助。这个版本效果最好。
var blink = function(){
  //close your eyes little bunny
  eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
  eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
  setTimeout(function(){
    //open them again
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
  }, 100);
};

setInterval(blink, 2000);

//made blink a named function to improve readability a bit
var blink = function(isSecondBlink) {
  //got rid of the ternary expressions since we're always doing
  //open eyes -> close eyes -> delay -> open eyes

  //close both eyes
  eyeleft.className = "closedeyeleft";
  eyeright.className = "closedeyeright";

  //let's reopen those eyes after a brief delay to make a nice blink animation
  //as it happens, humans take ~250ms to blink, so let's use a number close to there
  setTimeout(function() {
      eyeleft.className = "eyeleft";
      eyeright.className = "eyeright";
  }, 200);

  if (isSecondBlink) { return; } //prevents us from blinking 3+ times

  //This provides a 40% chance of blinking twice, adjust as needed
  var blinkAgain = Math.random() <= 0.4;

  //if we need to blink again, go ahead and do it in 300ms
  if (blinkAgain) {
    setTimeout(function() { blink(true); }, 300);
  }
}

//go ahead and blink every 2 seconds
window.onload = setInterval(blink, 2000);

    window.onload= startFunc();

function startFunc(){ 
    var timer = Math.round(Math.random() * 2000)
     setInterval(function(){
     timer = Math.round(Math.random() * 2000)


     setTimeout(function(){
      console.log(timer) 
                eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
              eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
          setTimeout(function(){ 
            eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
            eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
          }, 100);

     },timer)

     },1000)

    }