用java script写一个while循环点击一组按钮中任意一个按钮,其他按钮随机变化颜色
时间: 2023-08-29 17:07:40 浏览: 53
假设这组按钮的 HTML 代码如下:
```html
<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>
<button class="button">按钮4</button>
<button class="button">按钮5</button>
```
我们可以使用 JavaScript 给每个按钮添加一个点击事件监听器,然后在点击某个按钮时,循环遍历所有按钮,对除了当前被点击的按钮以外的其他按钮进行随机颜色变化。
以下是代码实现:
```javascript
// 获取所有按钮元素
const buttons = document.querySelectorAll('.button');
// 给每个按钮添加点击事件监听器
buttons.forEach(button => {
button.addEventListener('click', () => {
// 随机生成颜色
const randomColor = Math.floor(Math.random()*16777215).toString(16);
// 循环遍历所有按钮,对除了当前被点击的按钮以外的其他按钮进行随机颜色变化
buttons.forEach(otherButton => {
if (otherButton !== button) {
otherButton.style.backgroundColor = '#' + randomColor;
}
});
});
});
```
这段代码使用了 `Math.random()` 函数生成 0 到 1 之间的随机小数,然后乘以 16777215,最后取整并转换成 16 进制字符串,从而生成一个随机颜色。然后遍历所有按钮元素,如果某个按钮不是当前被点击的按钮,就将它的背景颜色设置为随机颜色。
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)