<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形按钮颜色控制器</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 300px;
}
.display-button {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 20px auto;
background-color: #cccccc;
border: none;
cursor: default;
transition: all 0.3s ease;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.control-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.control-button {
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
color: white;
transition: all 0.2s ease;
}
.control-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.control-button:active {
transform: translateY(0);
}
#button1 {
background-color: #e74c3c;
}
#button2 {
background-color: #e67e22;
}
#button3 {
background-color: #2ecc71;
}
/* 状态类 */
.red {
background-color: #e74c3c !important;
box-shadow:
0 4px 12px rgba(231, 76, 60, 0.4),
inset 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.orange {
background-color: #e67e22 !important;
box-shadow:
0 4px 12px rgba(230, 126, 34, 0.4),
inset 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
.green {
background-color: #2ecc71 !important;
box-shadow:
0 4px 12px rgba(46, 204, 113, 0.4),
inset 0 0 10px rgba(0, 0, 0, 0.1) !important;
}
</style>
</head>
<body>
<div class="container">
<h2>按钮颜色控制器</h2>
<button class="display-button" id="displayBtn"></button>
<div class="control-buttons">
<button class="control-button" id="button1">红色</button>
<button class="control-button" id="button2">橙色</button>
<button class="control-button" id="button3">绿色</button>
</div>
</div>
<script>
// 获取DOM元素
const displayBtn = document.getElementById('displayBtn');
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');
// 移除所有颜色类
function resetColors() {
displayBtn.classList.remove('red', 'orange', 'green');
}
// 按钮事件监听
button1.addEventListener('click', function() {
resetColors();
displayBtn.classList.add('red');
displayBtn.textContent = "红色状态";
});
button2.addEventListener('click', function() {
resetColors();
displayBtn.classList.add('orange');
displayBtn.textContent = "橙色状态";
});
button3.addEventListener('click', function() {
resetColors();
displayBtn.classList.add('green');
displayBtn.textContent = "绿色状态";
});
</script>
</body>
</html>
运行效果：
