javascript - 如何创建一个每次单击按钮时逐渐减少 2 行不透明度的函数

Question

我是编码新手，我正在尝试创建一个函数，每次单击按钮时都会逐渐减少 2 条线的不透明度(类似于楼梯设计)。这是我到目前为止所拥有的功能:

this.options.events['click button'] = function() {
  document.querySelector('#color_bottom').style.opacity = 0.7
  document.querySelector('#color_right').style.opacity = 0.7
};

上述函数将两条线 (#color_right) 和 (#color_bottom) 的不透明度从 1 更改为 0.7。但我需要帮助想出一个函数，每次单击按钮时，该函数都会逐渐减少不透明度(例如 0.1)。

非常感谢您的所有帮助!预先感谢您!

Answer 1

您可以维护一个初始值为1的全局变量。每次单击按钮时，该变量都会减少 0.1。

演示:

let start = 1;
function increaseOpacity() {
  start -= 0.1;
  document.querySelector('#color_bottom').style.opacity = start;
  document.querySelector('#color_right').style.opacity = start;
};

<button type="button" onclick="increaseOpacity()">Decrease</button>
<div id="color_bottom">color_bottom</div>
<div id="color_right">color_right</div>