原生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 相关文章推荐
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
javascript实现智能手环时间显示
Sep 18 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
校园安全广播稿
2014/02/08 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
小学生安全责任书
2014/07/25 职场文书
公司感谢信范文
2015/01/22 职场文书
小英雄雨来观后感
2015/06/09 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书