非常漂亮的js烟花效果


Posted in Javascript onMarch 10, 2020

本文实例为大家分享了js实现漂亮烟花效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>烟花</title>

<style type="text/css">
 div>div{
 width:10px;
 height:10px;
 border-radius: 50%;
 position: absolute;
 top:900px; 
 left:600px;
 background-color: red;
 } 
</style>

</head>
<body>
 <div id="box"><div id="start"></div></div>
</body>
<script type="text/javascript">
 var sta = 800;
 var staa = 8; 
 var startid = setInterval(function (){
 start.style.top = (sta-=staa)+"px";
 staa -=0.06;
 if(staa<=0.5){
  clearInterval(startid);
  start.style.display="none";
  za();
 }
 },10);
 
 var g = 0.01;
 var lv = 0;
 var times = 0;
 var opa =1;
 function za(){
 addiv();
 var s2 = setInterval(function(){
  lv+=g;
  for(var i=0;i<200;i++){
  var elem = document.getElementById("d"+i);
  elem.style.left = (arrl[i]+=(arrv[i]*Math.cos(arrr[i])))+"px";
  elem.style.top = (arrt[i]+=(arrv[i]*Math.sin(arrr[i])+lv))+"px";
  elem.style.opacity= (opa-=0.00001);
  if(arrv[i]>0)
   arrv[i]-=0.001;
  else arrv[i]=0;
  }
  
  if(times++>=1000) clearInterval(s2);
  
 },10);
 }
 
 var arrr = [];
 var arrl = [];
 var arrt = [];
 var arrv = [];
 var arro = []
 function addiv(){
 for(var i=0;i<200;i++){
  box.innerHTML+="<div id='d"+i+"'></div>"
  arrl[i]=600;
  arrt[i]=sta;
  arrv[i]=Math.random()*2+0.1;
  arrr[i]=Math.random()*Math.PI*2;
 }
 }
 
</script>
</html>

更多JavaScript精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
原生JS实现烟花效果
Mar 10 #Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 #Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 #Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 #Javascript
js模拟实现烟花特效
Mar 10 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jquery实现聚光灯效果的方法
2015/02/06 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
Python切片用法实例教程
2014/09/08 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
解决Python requests 报错方法集锦
2017/03/19 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
transform python环境快速配置方法
2018/09/27 Python
python config文件的读写操作示例
2019/09/27 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
老公保证书范文
2014/04/29 职场文书
单位绩效考核方案
2014/05/11 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android