非常漂亮的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 easyui的tabs使用时的问题
Mar 23 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
python 弧度与角度互转实例
2020/04/15 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
优质服务口号
2014/06/11 职场文书
应聘教师自荐信
2015/03/26 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
归途列车观后感
2015/06/17 职场文书