JavaScript 10行代码实现显示3秒的爱心
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 快速创建有趣的前端交互效果。
原文地址: https://gggwd.com/t/topic/bfK9 著作权归作者所有。请勿转载和采集!