用html+js写一个按下按钮改变按钮颜色为蓝色
时间: 2023-05-27 10:06:12 浏览: 53
<!DOCTYPE html>
<html>
<head>
<title>Change Button Color</title>
<script>
function changeColor() {
document.getElementById("myButton").style.backgroundColor = "blue";
}
</script>
</head>
<body>
<button id="myButton" onclick="changeColor()">Click me to change color</button>
</body>
</html>
相关问题
帮我写一个 用按钮改变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`元素的背景颜色。
写一个html+js,包含图表和按钮
好的,我可以回答这个问题。您可以使用 JavaScript 库,如 Chart.js 或 Highcharts,来创建图表。您可以在 HTML 中创建一个按钮,并使用 JavaScript 添加事件监听器来处理按钮点击事件。以下是一个示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>图表和按钮示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<button id="myButton">点击我</button>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码:
```
// 创建图表
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['红色', '蓝色', '黄色', '绿色', '紫色'],
datasets: [{
label: '颜色数量',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, .2)',
'rgba(54, 162, 235, .2)',
'rgba(255, 206, 86, .2)',
'rgba(75, 192, 192, .2)',
'rgba(153, 102, 255, .2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// 添加按钮点击事件监听器
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('按钮被点击了!');
});
```