Question

我工作的公司已在该Intranet上请求了一个生日小部件，该小部件显示了今天庆祝他或她生日的人。

我使用CSS，HTML和Jquery做了一些显示生日的人。用按钮关闭此窗口。在此窗口的背景上，正在运行一个confetti脚本（只是为了笑，它看起来很可爱）。但是所有的五彩纸屑都是分开呈现的。因此，它大约消耗220 confetti div's，这使计算机的运行速度变慢。

我正在使用以下脚本：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保留

窗口存储在堆栈片段中不起作用，所以我将其注释掉了

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>

带有五彩纸屑的生日脚本只能运行一次

1 个答案: