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

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