非常漂亮的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解决iframe高度自适应代码
Dec 20 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JavaScript DOM基础
Apr 13 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php 分页函数multi() discuz
2009/06/21 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python 实时遍历日志文件
2016/04/12 Python
Python网络编程 Python套接字编程
2017/09/13 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
满月酒答谢词
2014/01/14 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
安全生产演讲稿
2014/05/09 职场文书
工程售后服务方案
2014/06/08 职场文书
贷款担保书
2015/01/20 职场文书
义卖募捐活动总结
2015/05/09 职场文书
庆七一主持词
2015/06/29 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技