当按钮被点击时触发javascript功能，当再次点击时停止。

Question

所以我想在我的网站上添加一个浮动粒子的效果。遇到了这个代码本，它做的就是这个事情----------------------------------------------------------------。https:/codepen.ioOliverKriegerpenEjLEVX。.

我一直在尝试改变它，使粒子只有在选中复选框时才会触发，我知道这个问题可能在SO上已经回答过了，但在codepen代码中，有一个window.onload函数，它在窗口加载时自动启动。我知道这个问题可能在SO上已经回答过了，但是在codepen的代码中，有一个window.onload函数，它在加载窗口时自动启动。我希望有一个复选框来代替。

我试着在html中加入以下内容

<input  type="checkbox" id="switch" onchange="function()"">
        <label for="switch" >Toggle</label>

但是好像脚本还是会自动触发。谁能帮我解决这个问题，好吗？我是编程新手，所以我为任何含糊不清的地方道歉。如果我可以提供更多的细节，请告诉我。任何投入都将是非常感激的。

Answer 1

在你的代码中。function 是一个关键字而不是函数名。由于javascript中的定义方式，该函数在页面加载时仍然会运行，而你的HTML添加对此没有影响。

你需要把你的函数改成一个命名函数，用函数关键字声明。

function functionName() { ... }

然后你可以在HTML中用它的名字来调用它。

<input  type="checkbox" id="switch" onchange="functionName()">

Answer 2

这样就可以了

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

$(window).resize(function() {
  ParticleCanvas.width = ($(window).width() - 20);
  ParticleCanvas.height = ($(window).height() - 10);
});

$(function() {
  let request = null;

  $("#switch").change(function() {
    if (this.checked) {
      animateDust();
    } else {
      window.cancelAnimationFrame(request);
    }

  })

  var ParticleCanvas = document.getElementById("ParticleCanvas");
  var context = ParticleCanvas.getContext("2d");
  ParticleCanvas.width = ($(window).width() - 20);
  ParticleCanvas.height = ($(window).height() - 10);

  $("switch").click(function() {
    animateDust();
  })

  // All the info stored into an array for the particles
  var particles = {},
    particleIndex = 0,
    settings = {
      density: 20,
      particleSize: 2,
      startingX: ParticleCanvas.width / 2,
      startingY: ParticleCanvas.height,
      gravity: -0.01
    };

  // Set up a function to create multiple particles
  function Particle() {
    // Establish starting positions and velocities from the settings array, the math random introduces the particles being pointed out from a random x coordinate
    this.x = settings.startingX * (Math.random() * 10);
    this.y = settings.startingY;

    // Determine original X-axis speed based on setting limitation
    this.vx = (Math.random() * 2 / 3) - (Math.random() * 3 / 3);
    this.vy = -(Math.random() * 5 / 3);

    // Add new particle to the index
    // Object used as it's simpler to manage that an array
    particleIndex++;
    particles[particleIndex] = this;
    this.id = particleIndex;
    this.life = 0;
    this.maxLife = 200;
    this.alpha = 1;
    this.red = 0;
    this.green = 255;
    this.blue = 255;
  }

  // Some prototype methods for the particle's "draw" function
  Particle.prototype.draw = function() {
    this.x += this.vx;
    this.y += this.vy;

    // Adjust for gravity
    this.vy += settings.gravity;



    // Age the particle
    this.life++;

    this.red += 2;

    this.alpha -= 0.005;


    // If Particle is old, it goes in the chamber for renewal
    if (this.life >= this.maxLife) {
      delete particles[this.id];
    }



    // Create the shapes
    context.clearRect(settings.leftWall, settings.groundLevel, ParticleCanvas.width, ParticleCanvas.height);
    context.beginPath();
    context.fillStyle = "rgba(" + this.red + ", " + this.green + ", " + this.blue + ", " + this.alpha + ")";
    // Draws a circle of radius 20 at the coordinates 100,100 on the ParticleCanvas
    context.arc(this.x, this.y, settings.particleSize, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();

  }

  function animateDust() {
    context.clearRect(0, 0, ParticleCanvas.width, ParticleCanvas.height);

    // Draw the particles
    for (var i = 0; i < settings.density; i++) {
      if (Math.random() > 0.97) {
        // Introducing a random chance of creating a particle
        // corresponding to an chance of 1 per second,
        // per "density" value
        new Particle();
      }
    }

    for (var i in particles) {
      particles[i].draw();
    }
    request = window.requestAnimationFrame(animateDust);
  }


})

body {
  background-color: #000000;
  color: #555555;
  margin: 0;
  padding: 0;
}

#ParticleCanvas {
  border: 1px solid white;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#container {
  background: white;
  padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="ParticleCanvas"></canvas>
<div id="container">
  <form>
    <input type="checkbox" id="switch" name="switch">
  </form>
  <label for="switch">Toggle</label>
</div>