介绍,/*,设置基础的css样式,*/身体,{背景:# 000;溢出:,隐藏;}
,.fire{位置:,绝对的,宽度:,4 px;高度:,30 px;} ,//给页面设置点击事件=,document.onclick 函数(夜){
,var e =, eve | |, window.event;
,//设置一个空数组,用来后面存放小烟花
,var arr =, [];
,//获取鼠标点击的位置
,var x =, e.clientX;
,var y =, e.clientY;
,//设置步长
,var speed =, 20;
,//生成大烟花,设置他的css样式,出发点在可视区页面的下方
,var fire =, document.createElement (& # 39; div # 39;);=,fire.className & # 39;火# 39;;=,,fire.style.background randomColor ();=,,fire.style.left x +, & # 39; px # 39;;=,,fire.style.top document.documentElement.clientHeight + & # 39; px # 39;;
,//将大烟花追加到页面上
,document.body.appendChild(火); ,//生成定时器
,var t =, setInterval(函数(){
,//判断如果大烟花的最值小于小于目标值,清除定时器,并且将大烟花清除
,如果(fire.offsetTop & lt;=, y) {
,clearInterval (t);
,document.body.removeChild(火);
,//执行显示(生成小烟花)
,显示();
,}
,//让大烟花垂直向上运动=,,fire.style.top fire.offsetTop 作用;speed + & # 39; px # 39;;
,},30); function 显示(){
,//利用循环,生成50个小烟花,给小烟花添加css属性
,(var i=0; i<50,我+ +){
,var sFire =, document.createElement (& # 39; div # 39;);
,//sFire.className =, & # 39; small-fire& # 39;;=,,sFire.style.left x + & # 39; px # 39;;=,,sFire.style.top y + & # 39; px # 39;;
,//sFire.style.background =, randomColor ();=,,sFire.style.color randomColor ();=,sFire.innerHTML & # 39; & # 39;;=,sFire.style.position & # 39;绝对# 39;;
,//生成随机数
,var =math . random () * 360;=,,sFire.sx sin (* 180/Math.PI) * 20 * math . random ();=,,sFire.sy Math.cos (* 180/Math.PI) * 20 * math . random ();
,//将小烟花追加到页面上
,document.body.appendChild (sFire);
,//将生成的烟花信息都添加到数组中
,arr.push (sFire);
,}
以前,} setInterval (function 移动(){
,//利用循环一直改变小烟花的位置
,(var 我=0;i,//,范围随机数
,function 随机(最大值、最小值){
return 才能;Math.round (math . random() *(极大极小)+分钟);
,}
,//随机颜色
,function randomColor () {
return 才能“rgb(“+随机(0255)+“,“+随机(0255)+“,“+随机(0255)+“)“;
,}
使用JavaScript怎么实现一个烟花效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
基础css代码
js代码:
1,给页面添加点击事件,生成主体烟花
2,设置定时器,让烟花向上运动,删除
3,然后在点击的位置生成小烟花,设置样式
4,设置定时器,让小烟花完成自由落体运动
5,最后别忘了我们的随机数和随机颜色的封装
关于使用JavaScript怎么实现一个烟花效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
