2)当鼠标在第2个矩形框上单击的时候,矩形框内的文字发生变化,连续单击几次以后,该矩形框消失。显示这个问题的代码
时间: 2024-05-08 19:19:48 浏览: 41
unit Unit1.rar_Unit怎么画_delphi 图形_图形移动_矩形
很抱歉,由于我是一个语言模型 AI,无法直接执行代码,但我可以为您提供一个参考的代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Text on Click</title>
<style>
.box {
width: 150px;
height: 50px;
background-color: lightgray;
border: 1px solid gray;
text-align: center;
line-height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box-1" onclick="changeText(this)">Click Me</div>
<div class="box" id="box-2" onclick="changeText(this)">Click Me</div>
<div class="box" id="box-3" onclick="changeText(this)">Click Me</div>
<div class="box" id="box-4" onclick="changeText(this)">Click Me</div>
<script>
function changeText(element) {
element.innerHTML = "Clicked!";
element.onclick = function() {
element.parentNode.removeChild(element);
}
}
</script>
</body>
</html>
```
这个代码演示了如何通过点击改变一个矩形框的文字,并在连续单击几次后,使矩形框消失。在这个例子中,我们使用了 HTML、CSS 和 JavaScript。我们创建了一个 `div` 元素,它具有 `box` 类名和一个 `id` 属性。当单击矩形框时,我们调用 `changeText` 函数,使用 `innerHTML` 属性改变矩形框的文字,以及 `onclick` 属性,在下一次单击时从 DOM 树中删除该元素。
阅读全文