0

Есть скрипт который показывает конфетти, как сделать так что бы они показывались только 5 секунд а потом перестали показываться?

<script>
(function() {
  var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;

  NUM_CONFETTI = 350;

  COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

  PI_2 = 2 * Math.PI;

  canvas = document.getElementById("world");

  context = canvas.getContext("2d");

  window.w = 0;

  window.h = 0;

  resizeWindow = function() {
    window.w = canvas.width = window.innerWidth;
    return window.h = canvas.height = window.innerHeight;
  };

  window.addEventListener('resize', resizeWindow, false);

  window.onload = function() {
    return setTimeout(resizeWindow, 0);
  };

  range = function(a, b) {
    return (b - a) * Math.random() + a;
  };

  drawCircle = function(x, y, r, style) {
    context.beginPath();
    context.arc(x, y, r, 0, PI_2, false);
    context.fillStyle = style;
    return context.fill();
  };

  xpos = 0.5;

  document.onmousemove = function(e) {
    return xpos = e.pageX / w;
  };

  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
  })();

  Confetti = (function() {
    function Confetti() {
      this.style = COLORS[~~range(0, 5)];
      this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
      this.r = ~~range(2, 6);
      this.r2 = 2 * this.r;
      this.replace();
    }

    Confetti.prototype.replace = function() {
      this.opacity = 0;
      this.dop = 0.03 * range(1, 4);
      this.x = range(-this.r2, w - this.r2);
      this.y = range(-20, h - this.r2);
      this.xmax = w - this.r;
      this.ymax = h - this.r;
      this.vx = range(0, 2) + 8 * xpos - 5;
      return this.vy = 0.7 * this.r + range(-1, 1);
    };

    Confetti.prototype.draw = function() {
      var ref;
      this.x += this.vx;
      this.y += this.vy;
      this.opacity += this.dop;
      if (this.opacity > 1) {
        this.opacity = 1;
        this.dop *= -1;
      }
      if (this.opacity < 0 || this.y > this.ymax) {
        this.replace();
      }
      if (!((0 < (ref = this.x) && ref < this.xmax))) {
        this.x = (this.x + this.xmax) % this.xmax;
      }
      return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
    };

    return Confetti;

  })();

  confetti = (function() {
    var j, ref, results;
    results = [];
    for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
      results.push(new Confetti);
    }
    return results;
  })();

  window.step = function() {
    var c, j, len, results;
    requestAnimationFrame(step);
    context.clearRect(0, 0, w, h);
    results = [];
    for (j = 0, len = confetti.length; j < len; j++) {
      c = confetti[j];
      results.push(c.draw());
    }
    return results;
  };

  step();

}).call(this);

  </script>
6
  • setTimeout в помощь
    – splash58
    4 мар 2016 в 17:31
  • да но это наоборот выполнение после 5 секунд, а мне нужно первые 5 секунд
    – arthru
    4 мар 2016 в 17:34
  • через пять секунд запустится то, что остановит процесс. например, закроет окно
    – splash58
    4 мар 2016 в 17:36
  • как сделать что бы остановилась функция?
    – arthru
    4 мар 2016 в 17:37
  • зависит от функции, например в цикле проверять некоторый признак
    – splash58
    4 мар 2016 в 17:41

2 ответа 2

0

Оберните ваш исходный элемент. Вот пару простых примеров:

самый простой)

<div id='hellower'>
    <div id='world'></div>
</div>

<script>
    $(document).ready(function() {
        setTimeout(function(){
            var item = document.getElementById('hellower');
            item.style.display = 'none';
            item.style.visibility = 'hidden';
        },5000)
    });
</script>

через добавление класса стилей. используя style:

<style type="text/css">
    .hide{ display:none; visibility: hidden}
</style>

<div id='hellower'> 
    <div id='world'></div>
</div>

<script>
    $(document).ready(function() {
        setTimeout(function(){
            document.getElementById('hellower').className='hide';
        },5000)
    });
</script>

используя jQuery:

<div id='hellower'> 
    <div id='world'></div>
</div>

<script>
    $(document).ready(function() {
        setTimeout(function(){
            $('#hellower').hide();
        },5000)
    });
</script>

PS: эти примеры скроют элемент, и, если понадобится, его можно отобразить снова.

Но если же вы хотите показывать только первые пять секунд. Вым следует снять все event'ы c данного элемента и удалить его. К примеру так:

<script>
    $(document).ready(function() {
        setTimeout(function(){
            var item = document.getElementById('hellower');
            window.removeEventListener('resize', resizeWindow, false);
            item.remove();
        },5000)
    });
</script>
0

По умолчанию выводить блок с приветом, а через 5сек setTimeout с командой убрать блок.

1
  • обновил свой вопрос
    – arthru
    4 мар 2016 в 17:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.