本文介绍如何使用原生JavaScript实现点击页面生成爱心形状的烟花特效。通过监听鼠标点击事件，动态创建DOM元素模拟大烟花上升，随后在点击位置生成多个小爱心并模拟自由落体运动。代码包含随机颜色生成、定时器控制及边界检测，无需依赖第三方库即可实现炫酷的页面交互效果。
原生JS实现点击生成爱心烟花特效
本文演示如何使用原生JavaScript实现一个点击页面即生成烟花的特效。用户点击屏幕任意位置时，会生成一个主体烟花向四周扩散，随后受重力影响坠落。本示例中，烟花主体采用了特殊的爱心字符形状进行展示。
基础CSS样式设置
首先定义基础的CSS样式，用于设置页面背景及烟花元素的基本属性。
/* 设置基础的css样式 */
body{background: #000;overflow: hidden;}
.fire{position: absolute;width: 4px;height: 30px;}
JavaScript核心逻辑实现
接下来编写核心的JavaScript逻辑代码，实现烟花的生成与运动控制。
第一步，为页面添加点击事件监听器，当用户点击时生成主体烟花元素。
//给页面设置点击事件
document.onclick = function(eve){
var e = eve || window.event;
//设置一个空数组,用来后面存放小烟花
var arr = [];
//获取鼠标点击的位置
var x = e.clientX;
var y = e.clientY;
//设置步长
var speed = 20;
//生成大烟花,设置他的css样式,出发点在可视区页面的下方
var fire = document.createElement('div');
fire.className = 'fire';
fire.style.background = randomColor();
fire.style.left = x + 'px';
fire.style.top = document.documentElement.clientHeight+'px';
//将大烟花追加到页面上
document.body.appendChild(fire);第二步，利用定时器控制主体烟花向上运动，并在到达指定高度后移除该元素。
//生成定时器
var t = setInterval(function(){
//判断如果大烟花的TOP值小于小于目标值,清除定时器,并且将大烟花清除
if(fire.offsetTop <= y){
clearInterval(t);
document.body.removeChild(fire);
//执行show(生成小烟花)
show();
}
//让大烟花垂直向上运动
fire.style.top = fire.offsetTop - speed +'px';
},30);第三步，在用户点击的具体坐标位置生成多个小烟花元素，并设置其初始样式。
function show(){
//利用循环,生成50个小烟花,给小烟花添加css属性
for(var i=0;i<50;i++){
var sFire = document.createElement('div');
// sFire.className = 'small-fire';
sFire.style.left = x +'px';
sFire.style.top = y +'px';
// sFire.style.background = randomColor();
sFire.style.color = randomColor();
sFire.innerHTML = '❤';
sFire.style.position = 'absolute';
//生成随机数
var a=Math.random()*360;
sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random();
sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random();
//将小烟花追加到页面上
document.body.appendChild(sFire);
//将生成的烟花信息都添加到数组中
arr.push(sFire);
}
}第四步，通过定时器让小烟花执行自由落体运动，模拟重力效果。
setInterval(function move(){
//利用循环一直改变小烟花的位置
for(var i=0;i<arr.length;i++){
//设置将每次循环的第i个小烟花的运动范围
arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
//让烟花垂直方向的位置每次都增加,实现下落效果
arr[i].sy += 1;
//判断烟花是否运动出屏幕可视区,如果是,就将它删除
if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){
document.body.removeChild(arr[i]);
// arr.splice(i,1);
}
}
},30)
}第五步，封装随机数和随机颜色的生成函数，确保烟花颜色和位置具有随机性。
// 范围随机数
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
}
// 随机颜色
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}效果总结与扩展资源
完成上述步骤后，完整的烟花特效逻辑即告实现。
本次分享到此结束，希望读者能够喜欢这个特效。
此外，这里还推荐一些其他JavaScript精彩特效供参考：
JavaScript菜单特效大全
JavaScript仿QQ特效汇总
JavaScript时钟特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。