做一个小特效,让星星亮起来,非常简单!

这篇博客介绍如何使用HTML、CSS和JavaScript创建一个点击按钮后星星闪烁的特效。通过在HTML中设置input按钮和div容器,CSS定义样式,JavaScript处理点击事件并动态插入星星元素,实现了星星在页面上随机闪烁的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 HTML部分:

第一步我们需要写一个input标签,我给这个input标签命名为“点击亮起来”,再将input标签的类型改为button,我命名id为“btn”。然后第二步就是写一个div标签,id为“dvn”,这个div标签的作用是用来装从JavaScript传过来的星星的。代码如下图所示:

   CSS部分:

代码如图所示:

 JavaScript部分:

        首先我们第一步需要写一个页面加载事件,然后再分别通过“id”获取到HTML中的两个标签,再给“btn”也就是input标签绑定一个点击事件,在点击事件里写一个计时器,设定好每隔半秒执行一次计时器里的代码,在计时器里通过innerHTML将星星写入HTML的div标签中,再声明两个变量“x”和“y”,然后给这两个变量设置0-600的随机数,最后给星星元素设置left和top值,[firstChild]的意思是选择到幕布里的⭐;具体代码如下图所示:

初来乍到,请多多指教,大神勿喷。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值