首页2）当鼠标在第2个矩形框上单击的时候，矩形框内的文字发生变化，连续单击几次以后，该矩形框消失。显示这个问题的代码

2）当鼠标在第2个矩形框上单击的时候，矩形框内的文字发生变化，连续单击几次以后，该矩形框消失。显示这个问题的代码

时间: 2024-05-08 19:19:48 浏览: 40

很抱歉，由于我是一个语言模型 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 树中删除该元素。

阅读全文