javascript - 带五彩纸屑的生日脚本只运行一次

Question

我工作的公司要求在内联网上提供一个生日小部件，显示当天庆祝生日的人。

我使用 CSS、HTML 和 Jquery 制作了一些东西来显示生日的人。用一个按钮关闭这个窗口。在这个窗口的背景上有一个 confetti 脚本在运行(只是为了笑，看起来很可爱)。但是所有的五彩纸屑都是分开的。所以它产生了大约 220 个五彩纸屑 div ，这会减慢计算机的速度。

我正在使用这个脚本:Codepen here

而且我想让它只运行一次(只是一小块五彩纸屑)或者让 onClick 事件停止渲染五彩纸屑。

这是HTML

<section id="birthdays">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="bdwidget">
                    <h2><?php echo $username); ?></h2>
                    <?php echo $profielpicture; ?>
                    <button class="btn close-bd">Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

这是我正在使用的 jQuery 脚本。我将 SessionStorage 设置为只显示一次窗口。

<script>
    $('.close-bd').on('click touchstart', function () {
        $('#birthdays').css('display','none');
        $('#birthdays').addClass('disapear');
        sessionStorage.setItem('birthdays', true);  //set flag   
    });

    if (sessionStorage.getItem('birthdays')) {  //see if flag is set (returns undefined if not set)
        var show = sessionStorage.getItem('birthdays');
            if(show = 'true'){
                $('#birthdays').hide();
            }
    } else {
        $('#birthdays').show();
    }
</script>

但是当用户点击 close-bd 按钮时，五彩纸屑脚本继续运行。我想阻止它。我已阅读有关 .one() 或 .stop() 的内容，但我在必须将其放置在代码中的位置时遇到了问题。谢谢你的帮助...

这是五彩纸屑脚本:

for (var i = 0; i < 250; i++) {
  create(i);
}

function create(i) {
  var width = Math.random() * 8;
  var height = width * 0.4;
  var colourIdx = Math.ceil(Math.random() * 3);
  var colour = "red";
  switch(colourIdx) {
    case 1:
      colour = "yellow";
      break;
    case 2:
      colour = "blue";
      break;
    default:
      colour = "red";
  }
  $('<div class="confetti-'+i+' '+colour+'"></div>').css({
    "width" : width+"px",
    "height" : height+"px",
    "top" : -Math.random()*20+"%",
    "left" : Math.random()*100+"%",
    "opacity" : Math.random()+0.5,
    "transform" : "rotate("+Math.random()*360+"deg)"
  }).appendTo('.wrapper');  

  drop(i);
}

function drop(x) {
  $('.confetti-'+x).animate({
    top: "100%",
    left: "+="+Math.random()*15+"%"
  }, Math.random()*3000 + 3000, function() {
    reset(x);
  });
}

function reset(x) {
  $('.confetti-'+x).animate({
    "top" : -Math.random()*20+"%",
    "left" : "-="+Math.random()*15+"%"
  }, 0, function() {
    drop(x);             
  });
}

Answer 1

您可以 stop the animation :

我也清理了一些 jQuery，并在用户关闭和打开浏览器时使用 localStorage 来保存

窗口存储在 stacksnippets 中不起作用，所以我把它注释掉了

for (var i = 0; i < 250; i++) {
  create(i);
}

function create(i) {
  var width = Math.random() * 8;
  var height = width * 0.4;
  var colourIdx = Math.ceil(Math.random() * 3);
  var colour = "red";
  switch (colourIdx) {
    case 1:
      colour = "yellow";
      break;
    case 2:
      colour = "blue";
      break;
    default:
      colour = "red";
  }
  $('<div class="confetti-' + i + ' ' + colour + '"></div>').css({
    "width": width + "px",
    "height": height + "px",
    "top": -Math.random() * 20 + "%",
    "left": Math.random() * 100 + "%",
    "opacity": Math.random() + 0.5,
    "transform": "rotate(" + Math.random() * 360 + "deg)"
  }).appendTo('#birthdays');

  drop(i);
}

function drop(x) {
  $('.confetti-' + x).animate({
    top: "100%",
    left: "+=" + Math.random() * 15 + "%"
  }, Math.random() * 3000 + 3000, function() {
    reset(x);
  });
}

function reset(x) {
  $('.confetti-' + x).animate({
    "top": -Math.random() * 20 + "%",
    "left": "-=" + Math.random() * 15 + "%"
  }, 0, function() {
    drop(x);
  });
}

var $bd = $('#birthdays');
$('.close-bd').on('click touchstart', function() {
  
  $bd.hide()
  // localStorage.setItem('birthdays', true);  //set flag   - does not work at Stackoverflow
  $bd.find("[class^=confetti]").stop(true, true).fadeOut("slow");
});

// var show = localStorage.getItem('birthdays')
show = true; // remove after uncommenting 
$bd.toggle(show);

body {
  margin: 0;
  overflow: hidden;
}

.wrapper {
  position: relative;
  min-height: 100vh;
}

[class|="confetti"] {
  position: absolute;
}

.red {
  background-color: #E94A3F;
}

.yellow {
  background-color: #FAA040;
}

.blue {
  background-color: #5FC9F5;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<section id="birthdays">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <div class="bdwidget">
          <h2>
            <?php echo $username); ?>
          </h2>
          <?php echo $profielpicture; ?>
          <button class="btn close-bd">Close</button>
        </div>
      </div>
    </div>
  </div>
</section>