非常漂亮的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 相关文章推荐
js 编程笔记 无名函数
Jun 28 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
中国第一家无线电行
2021/03/01 无线电
PHP 采集获取指定网址的内容
2010/01/05 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
使用Python写一个小游戏
2018/04/02 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
如何用python免费看美剧
2020/08/11 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
营业经理岗位职责
2013/11/10 职场文书
师德师风学习材料
2014/12/19 职场文书
八达岭长城导游词
2015/01/30 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang