JavaScript 10行代码实现显示3秒的爱心

想要在网页上添加一些趣味互动？这段 JavaScript 代码将教你如何在短短 10 行代码内创建一个显示3秒后消失的红色爱心。javascriptconst heart = '♥';const heartContainer = document.createElement('div');heartContainer.style.color = 'red';heartContainer.style.fontSize = '24px';heartContainer.innerText = heart;document.body.appendChild(heartContainer);setTimeout(() => heartContainer.remove(), 3000);

代码解析:

const heart = '♥';: 定义一个变量 heart 并存储爱心符号。2. const heartContainer = document.createElement('div');: 创建一个 div 元素用于容纳爱心。3. heartContainer.style.color = 'red';: 设置爱心的颜色为红色。4. heartContainer.style.fontSize = '24px';: 设置爱心的字体大小为 24px。5. heartContainer.innerText = heart;: 将爱心符号添加到 div 元素中。6. document.body.appendChild(heartContainer);: 将 div 元素添加到网页的 body 中。7. setTimeout(() => heartContainer.remove(), 3000);: 使用 setTimeout 函数在 3 秒 (3000 毫秒) 后移除爱心。

将这段代码复制粘贴到你的 JavaScript 环境中运行，即可看到效果！这段简洁的代码展示了如何利用 JavaScript 快速创建有趣的前端交互效果。