四个按钮实现不同按钮点击实现不同效果
时间: 2023-06-17 11:06:36 浏览: 117
可以使用不同的事件处理函数来实现不同按钮的点击效果。例如,可以在 HTML 中为每个按钮添加不同的 id 属性,然后在 JavaScript 中使用 document.getElementById() 方法获取每个按钮的引用,再分别为它们添加不同的事件处理函数。下面是一个示例代码:
HTML 代码:
```html
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
```
JavaScript 代码:
```javascript
// 获取按钮的引用
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const btn4 = document.getElementById('btn4');
// 为按钮添加事件处理函数
btn1.addEventListener('click', function() {
// 点击按钮1的效果
console.log('按钮1被点击了!');
});
btn2.addEventListener('click', function() {
// 点击按钮2的效果
console.log('按钮2被点击了!');
});
btn3.addEventListener('click', function() {
// 点击按钮3的效果
console.log('按钮3被点击了!');
});
btn4.addEventListener('click', function() {
// 点击按钮4的效果
console.log('按钮4被点击了!');
});
```
在上述代码中,我使用了 addEventListener() 方法为每个按钮添加了一个 click 事件处理函数。当用户点击相应的按钮时,就会执行相应的事件处理函数,从而实现不同的点击效果。你可以根据自己的需求来修改事件处理函数的实现。