时间戳

首页 > 解决方案 > Javascript Scope，使用间隔开始停止按钮

javascript - Javascript Scope，使用间隔开始停止按钮

问题描述

我对范围有疑问。

我有一个不工作的停止按钮。开始按钮效果很好，但我似乎无法让停止按钮工作，我知道它与范围有关。我将不胜感激任何帮助。

let css = document.querySelector('h3');
let color1 = document.querySelector(".color1");
let color2 = document.querySelector(".color2");
let color3 = document.querySelector(".color3");
let degree = document.querySelector(".degree");
let body = document.getElementById("gradient");
let deg = document.getElementById("deg");
let random = document.getElementById("random");
let start = document.getElementById("start");
let stop = document.getElementById("stop");


function setGradient() {
  body.style.background =
    "linear-gradient(" +
    degree.value +
    "deg, " +
    color1.value +
    ", " +
    color2.value +
    ", " +
    color3.value +
    ")";

  css.textContent = body.style.background + ";";
  deg.textContent = degree.value;
}

function increment() {
  degree.value = 0;
  setInterval(function() {
    degree.value = degree.value % 360 + 1;
    setGradient();
    if (degree.value == 359) {
      increment();
    }
  }, 100);
}

start.addEventListener("click", increment);

stop.addEventListener("click", function() {
  clearInterval(counter);
});

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
color3.addEventListener("input", setGradient);
degree.addEventListener("input", setGradient);

window.onload = setGradient;

标签： javascriptscope

解决方案

您必须分配counter变量。

counter = setInterval(..)

推荐阅读