javascript - 单击停止按钮时，我想显示五彩纸屑。单击停止按钮时如何在整个页面上显示五彩纸屑

Question

单击停止按钮时，我想显示五彩纸屑。单击停止按钮时，如何在整个页面上显示五彩纸屑。

五彩纸屑应该覆盖整个页面，并且必须在几秒钟后停止

<script>
    const title = ['233594600123', '233551209799', '233207082341', '233243947954', '233247524779', '233244016344', '233243269122', '233242571672', '233552232442', '233553301458', '233552321132', '233507755919', '233243415919', '233202252548', '233246190260', '233245353528', '233544109090', '233246395617', '233594070244', '233244017403', '233244608668', '233559264705', '233204444480', '233241257967', '233591233440'];
    let winner; //Declare your global winner variable
    let animate; //Declare your global animate variable
    start(); //Start your animate interval
    
    function start() {
      let i = 0; //Why you're using var? i think you're using ES6. Use let
      winner = title[13]; // get winner (index 13) on every start
    
      animate = setInterval(function() { //Set your global interval
        document
          .getElementById('fruit')
          .innerHTML = title[i++];
        if (i === title.length) i = 0; //Please use === instead of ==
      }, 15);
    }
    
    function stop() {
      clearInterval(animate); //Clear your global interval
      document
        .getElementById('fruit')
        .innerHTML = winner;    
      title.splice(13, 1); //Remove winning item by index from your title array
    }
    </script> 
    
    <div class="row">
      
      <div class="column">
        <img src="car.jpg" alt="snow" style="width:100%">
      </div>
      <div class="column">
        <img src="fans.jpg" alt="Forest" style="width:100%">
      </div>
      <div class="column">
        <img src="carr.jpg" alt="Mountains" style="width:100%">
      </div>
    </div><br></br>
    <h1>THE WINNER IS : </h1>
    <h1><span id="fruit"></span></h1>
    
    <div class="right"><button onclick="stop()" class="button">STOP</button></div>
    <div class="left"><button onclick="start()" class="but">START</button></div>

下面是五彩纸屑的代码，我需要在单击停止按钮时显示它。

.wrapper
  - var i = 149
  while i > -1
    div(class="confetti-"+i)
    - i--

body {
  margin: 0;
  overflow: hidden;
}

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

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

$colors: (#d13447, #ffbf00, #263672);

@for $i from 0 through 150 {
  $w: random(8);
  $l: random(100);
  .confetti-#{$i} {
    width: #{$w}px;
    height: #{$w*0.4}px;
    background-color: nth($colors, random(3));
    top: -10%;
    left: unquote($l+"%");
    opacity: random() + 0.5;
    transform: rotate(#{random()*360}deg);
    animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s") infinite;
  }

  @keyframes drop-#{$i} {
    100% {
      top: 110%;
      left: unquote($l+random(15)+"%");
    }
  }
}

标签： javascriptcss

Answer 1

有很多方法可以在整个页面上显示五彩纸屑。

您可以使用下面的 Codepen 代码。

https://codepen.io/celli/pen/OPMqPV

您可以在 JS 代码的第 6 行使用颜色。

这是否回答你的问题？

(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 = class Confetti {
    constructor() {
      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();
    }

    replace() {
      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);
    }

    draw() {
      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})`);
    }};



  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);


//# sourceURL=coffeescript

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

<canvas id="world"></canvas>