首页用js写代码：盒子初识状态：100像素的正方形盒子，颜色为粉色。点击后：盒子变大一倍，盒子内提示：边长变大一倍！颜色改为你自己喜欢的颜色。

用js写代码：盒子初识状态：100像素的正方形盒子，颜色为粉色。点击后：盒子变大一倍，盒子内提示：边长变大一倍！颜色改为你自己喜欢的颜色。

时间: 2024-11-24 21:40:23 浏览: 6

你可以使用JavaScript和CSS结合HTML来创建这个效果。首先，在HTML中创建一个div元素作为你的盒子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> #myBox { width: 100px; height: 100px; background-color: pink; transition: all 0.5s ease; /* 添加过渡效果 */ } .box-message { display: none; /* 初始隐藏提示信息 */ } </style> </head> <body> <div id="myBox" onclick="changeBoxSize(event)"></div> <p class="box-message" id="message">边长变大一倍！颜色改为你自己喜欢的颜色。</p> <script src="script.js"></script>  </body> </html> ``` 然后，在`script.js`文件中编写JavaScript函数： ```javascript function changeBoxSize(e) { e.stopPropagation(); // 阻止事件冒泡到document let box = document.getElementById('myBox'); let message = document.getElementById('message'); box.style.width = `${box.offsetWidth * 2}px`; box.style.height = `${box.offsetHeight * 2}px`; // 双倍边长 box.style.backgroundColor = 'yourFavoriteColor'; // 替换为你喜欢的颜色 message.style.display = 'block'; // 显示提示信息 } ``` 在这个例子中，当你点击盒子时，宽度和高度会立即改变，并显示提示信息。你需要替换`yourFavoriteColor`为你喜欢的颜色，如`'blue'`。

阅读全文