JS,有10个div,分别使用3种颜色
时间: 2024-05-05 12:19:30 浏览: 11
的背景色,如何用JavaScript随机改变它们的颜色?
可以使用以下代码实现:
```javascript
var divs = document.getElementsByTagName("div"); // 获取所有的 div 元素
var colors = ["red", "blue", "green"]; // 定义三种颜色
for (var i = 0; i < divs.length; i++) {
var randomIndex = Math.floor(Math.random() * colors.length); // 随机生成一个索引
divs[i].style.backgroundColor = colors[randomIndex]; // 将 div 的背景色设置为随机生成的颜色
}
```
该代码首先获取页面中所有的 div 元素,然后定义三种颜色。之后使用 for 循环遍历所有的 div 元素,每次循环生成一个随机索引,再将当前 div 的背景色设置为对应的随机颜色。
相关问题
帮我写一个 用按钮改变div颜色的js代码 颜色分别为红绿蓝
好的,以下是实现你想要的功能的JS代码:
HTML代码:
```html
<button onclick="changeColor('red')">红色</button>
<button onclick="changeColor('green')">绿色</button>
<button onclick="changeColor('blue')">蓝色</button>
<div id="myDiv">这是一个div</div>
```
JS代码:
```javascript
function changeColor(color) {
var div = document.getElementById("myDiv");
div.style.backgroundColor = color;
}
```
当用户点击红色、绿色或蓝色按钮时,`changeColor()`函数会被调用,并将传递给它的颜色参数应用于`myDiv`元素的背景颜色。
帮我写一个用同一个按钮改变div颜色的js代码 颜色分别为红绿蓝
可以使用以下代码实现:
HTML代码:
```html
<div id="myDiv">这是一个div</div>
<button onclick="changeColor()">改变颜色</button>
```
JavaScript代码:
```javascript
function changeColor() {
var div = document.getElementById("myDiv");
var colors = ["red", "green", "blue"];
var currentColor = div.style.backgroundColor;
var index = colors.indexOf(currentColor);
// 如果当前颜色不在数组中或者已经是最后一个颜色,则从数组的第一个颜色开始
if (index == -1 || index == colors.length - 1) {
div.style.backgroundColor = colors[0];
} else {
div.style.backgroundColor = colors[index + 1];
}
}
```
代码解释:
1. 获取要改变颜色的 div 元素,通过其 id 属性获取。
2. 定义一个颜色数组,包含要循环显示的颜色。
3. 获取当前 div 元素的背景颜色。
4. 在颜色数组中查找当前颜色的位置。
5. 如果当前颜色不在数组中或者已经是最后一个颜色,则从数组的第一个颜色开始,否则显示下一个颜色。
6. 将新颜色设置为 div 元素的背景颜色。
相关推荐
![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)