js代码用button标签循环生成三个按钮,每个按钮用不同的颜色
时间: 2024-05-14 13:12:28 浏览: 17
这是一个示例代码,通过循环生成三个不同颜色的按钮:
```html
<!DOCTYPE html>
<html>
<head>
<title>生成按钮</title>
<style>
button {
padding: 10px;
margin: 10px;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="buttons"></div>
<script>
// 定义颜色数组
var colors = ['#f44336', '#4caf50', '#2196f3'];
// 获取按钮容器元素
var buttonsContainer = document.getElementById('buttons');
// 循环生成按钮
for (var i = 0; i < 3; i++) {
// 创建按钮元素
var button = document.createElement('button');
// 设置按钮样式和颜色
button.style.backgroundColor = colors[i];
// 设置按钮文本
button.innerText = '按钮 ' + (i + 1);
// 将按钮添加到容器中
buttonsContainer.appendChild(button);
}
</script>
</body>
</html>
```
在这个例子中,我们首先定义了一个颜色数组,其中包含三种颜色。然后,我们获取了一个按钮容器元素,并通过循环生成三个按钮。在每次循环中,我们创建一个按钮元素,并设置它的样式和颜色,然后将它添加到容器中。最终,我们得到了三个不同颜色的按钮。