原生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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
jQuery插件开发全解析
Oct 10 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php实现登陆模块功能示例
2016/10/20 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
js单词形式的运算符
2014/05/06 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
Python字符编码判断方法分析
2016/07/01 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
信息部岗位职责
2013/11/12 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
四议两公开实施方案
2014/03/28 职场文书
java解析XML详解
2021/07/09 Java/Android
Python  lambda匿名函数和三元运算符
2022/04/19 Python