原生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写的实用看图工具实现代码
Jul 26 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
分析javascript原型及原型链
Mar 18 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
详解Vue.js 响应接口
Jul 04 Javascript
微信小程序实现录音Record功能
May 09 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
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
小学生交通安全寄语
2015/02/27 职场文书
党支部工作总结2015
2015/04/01 职场文书
离婚协议书格式范本
2016/03/18 职场文书
人力资源部工作计划
2019/05/14 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python