js代码写出点击两个边框可以弹窗显示你鼠标点击的是左中右键中的哪一个,并把边框变为虚线
时间: 2023-12-10 12:39:05 浏览: 45
可以使用以下代码实现:
HTML:
```
<div class="box"></div>
```
CSS:
```
.box {
width: 200px;
height: 200px;
border: 2px solid black;
cursor: pointer;
}
.box.dashed {
border-style: dashed;
}
```
JavaScript:
```
const box = document.querySelector('.box');
box.addEventListener('mousedown', function(event) {
if (event.button === 0) {
alert('你点击了左键!');
} else if (event.button === 1) {
alert('你点击了中键!');
} else if (event.button === 2) {
alert('你点击了右键!');
}
box.classList.add('dashed');
});
box.addEventListener('mouseup', function() {
box.classList.remove('dashed');
});
```
当鼠标按下时,会根据按下的是左键、中键还是右键弹出对应的提示框,并将边框变为虚线。当鼠标松开时,虚线边框会消失。
相关问题
js代码写出点击两个边框可以弹窗显示你鼠标点击的是左中右键中的哪一个,并把边框变为虚线,两个文本框中分别是爸爸贺儿子,给出可执行代码
以下是一个简单的实现示例:
HTML:
```html
<div id="box1" class="box">爸爸</div>
<div id="box2" class="box">儿子</div>
<div id="popup" style="display:none;">
<p id="clickType"></p>
</div>
```
CSS:
```css
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
text-align: center;
line-height: 100px;
}
.dashed {
border-style: dashed;
}
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
}
```
JavaScript:
```javascript
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let popup = document.getElementById('popup');
let clickType = document.getElementById('clickType');
box1.addEventListener('mousedown', function(event) {
if (event.button === 0) {
clickType.textContent = '你点击了左键';
} else if (event.button === 1) {
clickType.textContent = '你点击了中键';
} else if (event.button === 2) {
clickType.textContent = '你点击了右键';
}
box1.classList.add('dashed');
popup.style.display = 'block';
});
box2.addEventListener('mousedown', function(event) {
if (event.button === 0) {
clickType.textContent = '你点击了左键';
} else if (event.button === 1) {
clickType.textContent = '你点击了中键';
} else if (event.button === 2) {
clickType.textContent = '你点击了右键';
}
box2.classList.add('dashed');
popup.style.display = 'block';
});
document.addEventListener('mouseup', function() {
box1.classList.remove('dashed');
box2.classList.remove('dashed');
popup.style.display = 'none';
});
```
当你点击左、中、右键时,将会在弹出的窗口中显示相应的信息,并且点击的边框将会变为虚线。当你松开鼠标时,边框将会恢复为实线。
我有左中右三个div,左中div都是固定宽度,如何让右div铺满剩余宽度,并且固定
可以使用CSS中的flexbox来实现这个布局。首先,将父元素设置为flex容器,然后将左中div设置为固定宽度,右div设置为flex-grow: 1; 和flex-shrink: 0;,这样右div就会自动铺满剩余的宽度,并且不会缩小。
以下是示例代码:
HTML:
```
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
```
CSS:
```
.container {
display: flex;
}
.left {
width: 100px;
}
.middle {
width: 200px;
}
.right {
flex-grow: 1;
flex-shrink: 0;
}
```
这样,右侧的div就会自动铺满剩余的宽度,并且不会缩小。
阅读全文