原生JS实现烟花效果


Posted in Javascript onMarch 10, 2020

原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去。(这里的烟花我是用的特殊字符爱心形状)

原生JS实现烟花效果

基础css代码

/* 设置基础的css样式 */
 body{background: #000;overflow: hidden;}
 .fire{position: absolute;width: 4px;height: 30px;}

js代码:

1、给页面添加点击事件,生成主体烟花

//给页面设置点击事件
 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);

2、设置定时器,让烟花向上运动,删除

//生成定时器
 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);

3、然后在点击的位置生成小烟花,设置样式

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);
 }
 }

4、设置定时器,让小烟花完成自由落体运动

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)
 }

5、最后别忘了我们的随机数和随机颜色的封装

// 范围随机数
 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 中令人困惑的变量赋值
Aug 13 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Vue前后端不同端口的实现方法
Sep 19 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
JS实现放烟花效果
Mar 10 #Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
You might like
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
Python中的zip函数使用示例
2015/01/29 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
西式结婚主持词
2014/03/14 职场文书
销售会计岗位职责
2014/03/15 职场文书
赡养老人协议书
2014/04/21 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年化验室工作总结
2014/11/21 职场文书
消防验收申请报告
2015/05/15 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL