如何获得不透明性以停止按下按钮的褪色？

Question

目前，我的线条不透明度每400毫秒减少3％。 我希望此功能继续，但是我还想创建一个按钮按下功能，一旦用户按下按钮，褪色停止，并且可以记录不褪色停止的位置。 非常感谢！

const step = 0.03

// Helper function to extract the stimulus elements
const getLines = () => 
  ['one', 'two', 'five', 'fourteen', 'fifteen']
    .map(id => document.getElementById(id))

getLines().forEach(line => line.style.opacity = 1);

// Setup event handler
var timer = undefined;
function decreaseOpacity() {
  getLines().forEach(line => {
        line.style.opacity -= step
        console.log(line.style.opacity);
  });
  timer = setTimeout(() => {
    decreaseOpacity();
  }, 400);
}
decreaseOpacity();

Answer 1

您可以使用clearTimeout(timer)停止计时器。 我使用了一个额外的变量来存储不透明度，以便于访问。 它可以像这样工作。 我试图猜测您的台词会是什么样子，但这可能是错误的（笑）...

 const step = 0.03 // Helper function to extract the stimulus elements const getLines = () => ['one', 'two', 'five', 'fourteen', 'fifteen'] .map(id => document.getElementById(id)) getLines().forEach(line => line.style.opacity = 1); // Setup event handler var timer = undefined; var opac = 1; function decreaseOpacity() { opac -= step; if (opac>0) { getLines().forEach(line => { line.style.opacity -= step //console.log(line.style.opacity); }); timer = setTimeout(() => { decreaseOpacity(); }, 400); } } decreaseOpacity(); document.getElementById("stopButton").onclick=e=>{ clearTimeout(timer); e.target.value=opac; } 

 .line {margin:30px;line-height:0;font-size:0;border-bottom:1px solid black;} #two {border-bottom-width:2px;} #five {border-bottom-width:5px;} #fourteen {border-bottom-width:14px;} #fifteen {border-bottom-width:15px;} 

 <input type="button" id="stopButton" value="Stop"> <div id="one" class="line"></div> <div id="two" class="line"></div> <div id="five" class="line"></div> <div id="fourteen" class="line"></div> <div id="fifteen" class="line"></div> 

Answer 2

回答：

您可以创建一个构造函数以将按钮方法和计时器绑定在一起：

function FadeMechanic(element) {
  let proto = {};
  proto.start = function() {
    proto.timer = setInterval(function() {
      element.style.opacity = getComputedStyle(element).opacity - .1;
    }, 1000);
  }
  proto.stop = function() {
    clearInterval(proto.timer);
    console.log(element.style.opacity);
  }
  return proto;
}

---

例：

 let el = document.querySelector.bind(document), start = el("#start"), stop = el("#stop"), target = el("#fader"); function FadeMechanic(element) { let proto = {}; proto.start = function() { proto.timer = setInterval(function() { element.style.opacity = getComputedStyle(element).opacity - .1; }, 1000); } proto.stop = function() { clearInterval(proto.timer); console.log(element.style.opacity); } return proto; } let fader = FadeMechanic(target); start.addEventListener("click", fader.start); stop.addEventListener("click", fader.stop); 

 section { width: 100px; height: 100px; background: black; opacity: 1; } 

 <button id="start">start</button> <button id="stop">stop</button> <section id="fader"></section> 

---

扩展多个：

由于我们的构造函数可以与一个元素一起使用，因此我们只需为多个元素创建一个包装器即可：

function FadeController(elements) {
  let proto = {};
  proto.elements = elements.map(FadeMechanic);
  proto.start = () => proto.elements.forEach(element => element.start());
  proto.record = [];
  proto.stop = () => proto.record.push(proto.elements.map(element => element.stop())[0]);

  proto.stopAndPrintRecord = () =>( proto.stop(), console.log(proto.record) );
  return proto;
}

这也让我们来存储一个record我们现在和以前停止混浊。

---

例：

 let el = document.querySelector.bind(document), start = el("#start"), stop = el("#stop"), targets = [el("#fader"), el("#fader2")]; function FadeMechanic(element) { let proto = {}; proto.start = function() { proto.timer = setInterval(function() { element.style.opacity = getComputedStyle(element).opacity - .1; }, 1000); } proto.stop = function() { clearInterval(proto.timer); return element.style.opacity; } return proto; } function FadeController(elements) { let proto = {}; proto.elements = elements.map(FadeMechanic); proto.start = () => proto.elements.forEach(element => element.start()); proto.record = []; proto.stop = () => proto.record.push(proto.elements.map(element => element.stop())[0]); proto.stopAndPrintRecord = () =>( proto.stop(), console.log(proto.record) ); return proto; } let fader = FadeController(targets); start.addEventListener("click", fader.start); stop.addEventListener("click", fader.stopAndPrintRecord); 

 section { width: 100px; height: 100px; background: black; opacity: 1; border: 1px solid grey; } 

 <button id="start">start</button> <button id="stop">stop</button> <section id="fader"></section> <section id="fader2"></section> 

---

使用您的代码：

 const step = 0.03, click = (sel, fn) => document.querySelector(sel).addEventListener("click", fn), // Helper function to extract the stimulus elements getLines = () => ['one', 'two', 'five'] .map(id => document.getElementById(id)) function FadeMechanic(element) { let proto = {}; proto.start = function() { proto.timer = setInterval(function() { element.style.opacity = getComputedStyle(element).opacity - step; }, 400); } proto.stop = function() { clearInterval(proto.timer); return element.style.opacity; } return proto; } function FadeController(elements) { let proto = {}; proto.elements = elements.map(FadeMechanic); proto.start = () => proto.elements.forEach(element => element.start()); proto.record = []; proto.stop = () => proto.record.push(proto.elements.map(element => element.stop())[0]); proto.stopAndPrintRecord = () =>( proto.stop(), console.log(proto.record) ); return proto; } const lineFader = FadeController(getLines()); click("#start", lineFader.start); click("#stop", lineFader.stopAndPrintRecord); 

 <span id="one">one</span> <span id="two">two</span> <span id="three">three</span> <span id="four">four</span> <span id="five">five</span> <button id="start">Start</button> <button id="stop">Stop</button> 

Answer 3

您需要清除点击超时，才能使其停止。

function stopTimeout(e) {
  clearTimeout(timer);
  opacity_level = e.target.style.opacity;
}

document.getElementById("#somebutton").onclick = stopTimeout()