如何创建一个函数，每次单击按钮时都会逐渐减少 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>

Answer 2

只是一个小例子。您可以根据需要更改逻辑。

const sub = 0.1;
var main = 1;
this.options.events['click button'] = function() {
    if (main > 0) {
        document.querySelector('#color_bottom').style.opacity = main - sub;
        document.querySelector('#color_right').style.opacity = main - sub;
    } else {
        main = 1;
    }
};

Answer 3

您可以减小行的 stroke-opacity 属性的值：

let lines = document.querySelectorAll("line");
let so = 1;//the initial stroke opacity is set to 1
theButton.addEventListener("click",()=>{
  if(so > 0){so -=.1;// if the stroke opacity is greater than 1 decrease it
  lines.forEach(l=>{// reset the stroke-opacity attribute of the lines
    l.setAttributeNS(null,"stroke-opacity",so)
  })
  }
})

line{stroke:black}
svg{border:1px solid; stroke-width:5; width:90vh;}

<p><button id="theButton">theButton</button></p>
<svg viewBox="0 0 100 100" >
  <line x1="10" y1="90" x2="85" y2="90" stroke-opacity="1" />
  <line y1="10" x1="90" y2="85" x2="90" stroke-opacity="1" />
  
</svg>

Answer 4

您可以将对这两行的引用存储在一个数组中，设置默认的不透明度值，然后在每次单击按钮时降低不透明度：

const step = 0.1

const lines = ['color_bottom', 'color_right']
    .map(id => document.getElementById(id))
    .map(el => {
        el.style.opacity = 1
        return el
    });

document.getElementsByTagName('button')[0].addEventListener('click', () => {
    lines.forEach(line => {
        line.style.opacity -= step
    })
});

<p id="color_bottom">Line 1</p>
<p id="color_right">Line 2</p>
<button>Reduce Opacity</button>

Answer 5

const button = document.querySelector('.example');
let opacity = 1;

button.addEventListener('click', function() {
 opacity -= 0.2;
 this.style.opacity = opacity;
});

.example {
    background-color:blue;
    border: none;
    padding: 10px 20px;
}

<button class="example">Button</button>

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

How to create a function that incrementally reduces opacity of 2 lines every time a button is clicked

html

javascript

svg

button

opacity