firework—烟花源码(01)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>烟花绽放效果</title><style>*{margin:0;padding: 0;}html{height: 100%;}body{height: 100%;background: #000;overflow: hidden;}.box{width: 5px;height: 30px;border-radius: 50%;background: red;position: absolute;}.yanhua{width: 8px;height: 8px;border-radius: 100%;background: rgb(253, 253, 253);position: absolute;}</style>
</head>
<body><script type="text/javascript">document.addEventListener('click',function(e){//获取鼠标点击的位置var e = e || window.event;var x = e.clientX;var y = e.clientY;var h = document.body.clientHeight;//创建一个div  var oDiv = document.createElement("div"); //属性设置oDiv.className = 'box';oDiv.style.left = x + 'px';oDiv.style.top = h + 'px';oDiv.style.background = color1();//将元素添加到body  document.body.appendChild(oDiv);  //将div移动到点击位置var time =     setInterval(function(){oDiv.style.top = oDiv.offsetTop - 10  + 'px';if(oDiv.offsetTop <= y){clearInterval(time);oDiv.style.top = y + 'px';document.body.removeChild(oDiv);  //炸开的烟花yanhua(x,y,h);}},1000/60);})//小烟花函数function yanhua(x,y,h){var ind = Math.round( Math.random()*50)+10;var fires = [];for(var i = 0 ; i < ind; i++){fires[i] = document.createElement("div"); fires[i].className = 'yanhua';fires[i].style.left = x + 'px';fires[i].style.top = y + 'px';fires[i].style.background = color1();fires[i].weizhiX = Math.round( Math.random()*20 - 10);fires[i].weizhiY = Math.round( Math.random()*20 - 10);document.body.appendChild(fires[i]);}  //炸开setInterval(function(){for(var j = 0;j<ind;j++){fires[j].style.left = fires[j].offsetLeft + fires[j].weizhiX + 'px';fires[j].style.top = fires[j].offsetTop + fires[j].weizhiY + 'px';fires[j].weizhiY +=0.5;if(fires[j].offsetTop > h || fires[j].offsetLeft < 0 || fires[j].offsetLeft > document.body.clientWidth){document.body.removeChild(fires[j]); // clearInterval(timet);}}},1000/60);  }//随机颜色function color1(){var r = Math.round( Math.random()*255);var g = Math.round( Math.random()*255);var b = Math.round( Math.random()*255);return 'rgb('+ r +','+ g +','+ b +')';}function color2(){return '#' + (~~(Math.random()*(1<<24))).toString(16);}</script>
</body>
</html>

firework—烟花源码(01)相关推荐

2023跨年烟花3D最炫烟花，html最酷炫动态烟花源码分享，点击即可直接运行
java制作烟花源码_java源码解读-java烟花代码!
解读JAVA代码正在自学java,刚入门,图形界面没太看懂贴一段简单的代码,求逐行解释.. java程序解析 public class text6{ final String color; pub ...
SEAL开源库源码01
SEAL开源库源码01 文章目录 SEAL开源库源码01 seal/util/defines.h 通用的判断函数将x输出为字符串字符串的拼接检查double类型是否是64比特检查int是否为3 ...
Spring5源码 - 01 BeanDefination源码分析
文章目录引入 Bean实例化的原理 singleton vs prototype Singleton VS Prototype 小结下文引入 Spring 是如何生成一个Bean的? 我们先看个 ...
php验证码雪花源码,php如何生成雪花背景验证码（附代码）
本文章来给大家介绍php生成雪花背景验证码程序代码 ,有需要的朋友可进入参考参考. 验证码生成程序<?php session_start(); session_register("lo ...
html烟火源码,HTML5：烟火
本次目标:在canvas画布上绘制彩色小球并实现模拟烟花般的动画效果. 程序很简单,只需要理解canvas元素,在指定位置用指定颜色绘制圆球然后逐帧形成动画就可以了. 考虑到性能因素,在球离开视觉区域 ...
Python画玫瑰花源码
源码 #绘制玫瑰花并添加文字 import turtle # 设置画布大小 # turtle.screensize(canvwidth=None, canvheight=None, bg=None) ...
520告白日~情人节特献3D玫瑰花源码
520就要来临了,还是Roman Cortes,这次他又带来了用JavaScript脚本编写的红色玫瑰花.用代码做出的玫瑰花,这才是牛逼程序员送给女友的最好情人节礼物呢! (提示:在不同浏览器下观看效 ...
PHP源码01 - php7编译安转、新特性
环境搭建虽然php8已经上市,但是系统学习一下php7,初衷的打算是想彻底的掌握PHP的底层原理和语言结构,结合PHP开发PHP扩展.或者是编写一个Swoole的框架,解决实际生产的性能问题,解放生 ...

firework—烟花源码(01)

firework—烟花源码(01)相关推荐

最新文章

热门文章