写一个按钮,三个盒子,点击按钮时盒子背景颜色都变成蓝色
时间: 2023-07-04 18:30:58 浏览: 64
好的,以下是一个简单的实现:
HTML代码:
```html
<button id="change-color-btn">点击我改变盒子颜色</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
```
CSS代码:
```css
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
.blue {
background-color: blue;
}
```
JavaScript代码:
```javascript
const btn = document.getElementById('change-color-btn');
const boxes = document.querySelectorAll('.box');
btn.addEventListener('click', () => {
boxes.forEach(box => box.classList.add('blue'));
});
```
当点击按钮时,JavaScript代码会为每个盒子添加 `blue` 类,使它们的背景颜色变为蓝色。
相关问题
使用css写一个按钮点击时背景颜色从右往左变成黑色的代码
您可以使用以下 CSS 代码来实现这个效果:
```css
.button {
background-color: white;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: black;
background-image: linear-gradient(to left, black, white);
}
```
这个代码会让按钮的背景颜色从右往左渐变为黑色。当鼠标悬停在按钮上时,背景颜色会变成黑色,并且会出现一个渐变效果。
用html和JS写一个点击按钮可以更换背景颜色的代码
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
<style>
body{
background-color: #f0f0f0;
}
</style>
</head>
<body>
<button onclick="changeColor()">Change Color</button>
<script src="script.js"></script>
</body>
</html>
```
JS:
```
function changeColor(){
let colors = ["#ff6347", "#00ff7f", "#87ceeb", "#ffd700", "#9400d3", "#ff8c00"];
let randomColor = colors[Math.floor(Math.random()*colors.length)];
document.body.style.backgroundColor = randomColor;
}
```
在这个例子中,我们定义了一个按钮,当它被点击时,调用 `changeColor` 函数。这个函数将从预定义的颜色数组中选择一个颜色,并将其设置为页面背景颜色。