js放礼花效果

最新推荐文章于 2024-03-20 09:53:58 发布
最新推荐文章于 2024-03-20 09:53:58 发布
阅读量1.8k 收藏 1
点赞数
文章标签： function colors html xhtml generator div

在论坛中看到朋友用js做得放烟花效果，把它整理下来，以备以后不时之需~~~ 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE>【编程游戏】--贺岁放礼花-- </TITLE>
<STYLE type=text/css>
BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
.STYLE1 {
color: #FF0000;
font-size: 16pt;
font-weight: bold;
}
</STYLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.3959" name=GENERATOR> </HEAD>
<BODY bgColor=#000000>

<table width="100%" height="600">
<tr>
<td valign="middle" align="center">
<p class="STYLE1">祝CSDN全体会员2009年新年快乐！ </p>
</td>
</tr>
</table>
  <!--[if IE ]>
      <STYLE type=text/css>BODY {
OVERFLOW: hidden
}
v/:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<![endif]-->
  <!--[if IE ]>
      <SCRIPT language=JavaScript>

 

colors = new Array();


// Define your own color combinations

colors[0] = new Array('red', 'fuchsia');

colors[1] = new Array('yellow', 'lime');

colors[2] = new Array('yellow', 'red');

colors[3] = new Array('silver', 'purple');

colors[4] = new Array('purple', 'white');

colors[5] = new Array('blue', 'silver');

colors[6] = new Array('silver', 'green')

colors[7] = new Array('silver', 'blue');


// Define the maximum number of fire arrows

maximum = 1000;


vmlobj='';

for(i = 0; i < 12; i++){

vmlobj += ' <div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';

vmlobj += ' <v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';

vmlobj += ' <v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';

vmlobj += ' <v:stroke on="false" /> </v:shape> </div>';

}

document.write(vmlobj); vmlobj = null;


aantal = 0;


function begin()

{

try {

if(aantal == maximum){ return;}

kleurschema = Math.floor(Math.random() * colors.length);

posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));

posLinks = (posLinks < 170)? 170: posLinks;

posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));

posBoven = (posBoven < 170)? 170: posBoven;

straal = 0; uiteen = true; teller = 1; flikkereffect = false;

for(var i = 0; i < 12; i++){

document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);

document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix

document.getElementById('ster'+i).style.left = posLinks;

document.getElementById('ster'+i).style.top = posBoven;

}

document.getElementById('ster0').style.top = (document.body.clientHeight - 20);

document.getElementById('ster0').style.visibility = 'visible';

omhoog();

} catch(e){}

}


function omhoog()

{

try {

  positie = parseInt(document.getElementById('ster0').style.top);

  if(positie > posBoven){

  document.getElementById('ster0').style.top = (positie - 25);

  setTimeout('omhoog()', 50);

  } else {

  for(i = 1; i < 12; i++){

  document.getElementById('ster'+i).style.top = positie;

  document.getElementById('ster'+i).style.visibility = 'visible';

  }

  uiteenspatten();

  }

} catch(e){}

}


function uiteenspatten()

{

try {

if(straal > 120 && straal % 10 == 0){

flikkereffect = true;

teller = (teller == colors[kleurschema].length)? 0: (teller+1);

}

for(var i = 0; i < 12; i++){

var hoek = i * 30;

var piHoek = Math.PI - Math.PI / 180 * hoek;

var links = posLinks + Math.round(straal * Math.sin(piHoek));

var boven = positie + Math.round(straal * Math.cos(piHoek));

document.getElementById('ster'+i).style.left = links;

document.getElementById('ster'+i).style.top = boven;

  if(flikkereffect){

  document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);

  }

}

if(straal < 160 && uiteen){

straal += (straal < 120)? 10: 5;

setTimeout('uiteenspatten()', 50);

}

else if(straal > 120){

uiteen = false; straal -= 5;

setTimeout('uiteenspatten()', 50);

}

else if(straal <= 120){

  for(var i = 0; i < 12; i++){

  document.getElementById('ster'+i).style.visibility = 'hidden';

  }

aantal++;

setTimeout('begin()', 300);

}

} catch(e) {}

}


window.οnlοad=begin;


</SCRIPT>
<![endif]-->
</BODY> </HTML>

 

 

 

 

 

 

 

 

<2>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【编程游戏】贺岁放礼花 -- freewind</title>
<style type="text/css">
    body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
    .ball{color:#FF0000; position:absolute; font-size:16px;}
    .star{color:#FF0000; position:absolute; font-size:4px;}
</style>
<script type="text/javascript">
function Firework(sky, loop){
    this.sky = sky;
    this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
    this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
    this.x = this.y = 0;
    this.step = 20;
    this.delay = 30;
    this.stars = [];
    this.r = 10;
    this.step2 = 7;
    this.radius = 80;
    this.angle = 45;
    this.num = 16;
    this.loop = loop;
}
Firework.prototype = {
    init : function(){
        this.x = parseInt(this.skyWidth/2 * Math.random()) + this.skyWidth / 4;
        this.y = this.skyHeight;
        this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
    },
    show : function(){
        var b = document.createElement("div");
        b.innerHTML = "●";
        b.className = "ball";
        b.style.left = this.x + "px";
        b.style.top = this.y + "px";
        this.ball = b;
        this.sky.appendChild(this.ball);
    },
    hide : function(){
        this.sky.removeChild(this.ball);
        this.ball = null;
    },
    hideStars : function(){
        for(var i=1; i<=this.num; i++){
            this.sky.removeChild(this.stars[i]);
            this.stars[i] = null;
        }
        if(this.loop){
            this.play();
        }
    },
    setStarPos : function(){
        for(var i=1; i<=this.num; i++){
            var p = parseInt(this.r / this.radius * 10);
            this.stars[i].style.left = this.x - parseInt(this.r * Math.sin(i * this.angle)) + "px";
            this.stars[i].style.top = this.y - parseInt(this.r * Math.cos(i * this.angle)) + "px";
            this.stars[i].style.fontSize = 4 + p + "px";
        }
    },
    showStars : function(){
        var angles = [15, 30, 45, 60];
        var maxs = [20, 12, 6, 10];
        var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFFF0'];
        var rand = parseInt(Math.random() * maxs.length);
        this.r = 10;
        this.num = maxs[rand];
        this.angle = angles[rand];
        for(var i=1; i<=this.num; i++){
            this.stars[i] = document.createElement("div");
            this.stars[i].innerHTML = "★";
            this.stars[i].className = "star";
            this.stars[i].style.color = colors[parseInt(Math.random()*colors.length)];
            this.sky.appendChild(this.stars[i]);
        }
    },
    moveStars : function(){
        var self = this;
        if(this.r < this.radius){
            var p = this.step2 - parseInt(this.r / this.radius * 5);
            p = p < 1 ? 1 : p;
            this.r += p;
            this.setStarPos();
            setTimeout(function(){self.moveStars();}, this.delay);
        }else{
            setTimeout(function(){self.hideStars();}, 300 * Math.random());
        }
    },
    fire : function(){
        this.hide();
        this.showStars();
        this.moveStars();
    },
    move : function(){
        var self = this;
        if(this.y > this._y){
            var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
            this.y -= (this.step - p * 1.6);
            this.ball.style.fontSize = 16 - p + "px";
            this.ball.style.top = this.y + "px";
            setTimeout(function(){self.move();}, this.delay);
        }else{
            this.fire();
        }
    },
    play : function(){
        this.init();
        this.show();
        this.move();
    }
};

window.onload = function(){
    new Firework(document.body, true).play();
    new Firework(document.body, true).play();
    new Firework(document.body, true).play();
};
</script>
</head>

<body>
</body>
</html>

 

 

《3》

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>【编程游戏】贺岁放礼花。</title>
<style>
   div.fire{
       position:absolute;
       font-size:12px;
       width:12px;
       height:12px;
   }
   span{
       position:absolute;
       width:1px;
       height:1px;
   }
</style>
</head>
<body style="margin:0px;">
<div id="container" style="background:#000;width:900px;height:700px;"></div>
<script type="text/javascript">
    var imgChar = "●";
    var fireColor = ["red", "orange", "yellow", "pink", "cyan"];
    var container = document.getElementById("container");

    var FireMain = function(){
        var self = this;
        this.inUse = false;
        this.timer;
        this.left;
        this.top;
        this.minTop;
        this.speed;
       
        this.color;
        this.fireDiv = document.createElement("div");
        this.fireSpan = [];
        this.blastCount = 0;
        this.blastRadius = 2;
        this.blastTotal = 40;
        this.blastLength = 6;

        for(var i=0; i<16; i++){
            this.fireSpan[i] = [];
            for(var j=0; j<this.blastLength; j++)
                this.fireSpan[i][j] = document.createElement("span");
        }
       
        this.init = function(left, top, speed, minTop, color){
            this.left = left;
            this.top = top;
            this.minTop = minTop;
            this.speed = speed;
            this.color = color;
            this.blastCount = 0;
        }

        this.start = function(){
            this.fireDiv.className = "fire";
            this.fireDiv.innerHTML = imgChar;
            this.fireDiv.style.left = this.left + "px";
            this.fireDiv.style.top = this.top + "px";
            this.fireDiv.style.color = this.color;
            container.appendChild(this.fireDiv);

            this.timer = window.setInterval(
                function(){
                    self.rise();
                }
            , 20);
        }

        this.rise = function(){
            this.top -= this.speed;
            this.fireDiv.style.top = this.top + "px";

            if(this.top <= this.minTop){
                window.clearInterval(this.timer);
                container.removeChild(this.fireDiv);
                this.fire();
            }
        }

        this.fire = function(){
            for(var i=0; i<16; i++){
                for(var j=0; j<this.blastLength; j++){
                    this.fireSpan[i][j].style.background = this.color;
                    this.fireSpan[i][j].style.left = this.left + 6;
                    this.fireSpan[i][j].style.top = this.top + 6;
                    if(this.fireSpan[i][j].parentNode == container){
                        this.fireSpan[i][j].style.display = "";
                    }else{
                        container.appendChild(this.fireSpan[i][j]);
                    }
                }
            }

            this.timer = window.setInterval(
                function(){
                    self.blast();
                }
            , 20);
        }

        this.blast = function(){
            this.blastCount++;
            for(var i=0; i<16; i++){
                var sin = Math.abs(Math.sin(i * Math.PI / 8));
                var cos = Math.abs(Math.cos(i * Math.PI / 8));
                var xP = (i<=4 || i>=12)?1:-1;
                var yP = i<=8?-1:1;
               
                this.fireSpan[i][this.blastCount%6].style.left = this.left + 6 + xP * this.blastCount * this.blastRadius * cos + "px";
                this.fireSpan[i][this.blastCount%6].style.top = this.top + 6 + yP * this.blastCount * this.blastRadius * sin + this.blastCount/3 + "px";
            }

            if(this.blastCount >= this.blastTotal){
                window.clearInterval(this.timer);
                for(var i=0; i<16; i++){
                    for(var j=0; j<this.blastLength; j++)
                        this.fireSpan[i][j].style.display = "none";
                }
                this.inUse = false;
            }
        }
    }

    var FireControl = function(interval, poolSize){
        var self = this;
        this.timer;
        this.interval;
        this.firePool = [];
        for(var i=0; i<poolSize; i++){
            this.firePool[i] = new FireMain();
        }

        this.fire = function(){
            var left = 150 + Math.floor(Math.random()*600);
            var top = 700 - 12;
            var speed = 4 + Math.floor(Math.random()*3);
            var minTop = 150 + Math.floor(Math.random()*300);
            var color = fireColor[Math.floor(Math.random() * fireColor.length)];
           
            var fireMain = this.instance();
            fireMain.inUse = true;
            fireMain.init(left, top, speed, minTop, color);
            fireMain.start();
        }
       
        this.instance = function(){
            for(var i=0; i<this.firePool.length; i++){
                if(!this.firePool[i].inUse){
                    return this.firePool[i];
                }
                if(i == this.firePool.length - 1){
                    this.firePool.push(new FireMain());
                    return this.firePool[i + 1];
                }
            }
        }
       
        this.start = function(){
            this.fire();
            this.timer = window.setInterval(
                function(){
                    self.fire();
                }
            , interval);
        }
    }

    var fireControl = new FireControl(1000, 5);
    fireControl.start();
</script>
</body>
</html>

makey203
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现烟花特效
weixin_52580677的博客
03-02 1519
通过js实现烟花绽放效果
js实现动态樱花飘落
热门推荐
∑
10-29 3万+
HTML： <canvas id="sakura"></canvas> <div class="btnbg"> <button type="button" onclick="toggleAnimation(this)">Stop</button> </div> <!-- sakura shader --> &l...
撒花特效Demo
01-19
根据本人博客所写的一个撒花的特效，相信你会喜欢的
JavaScript撒花特效
buyue
02-14 383
https://github.com/catdad/canvas-confettihttps://emojipedia.org/party-popperhttps://emojis.wiki/party-popper
js 特效 html 特效 礼花背景
08-20
js 特效 html 特效 礼花背景 js 特效 html 特效 礼花背景
js 特效 html 特效 天女散花
09-03
js 特效 html 特效 天女散花 js 特效 html 特效 天女散花
js模拟烟花特效
qq_39421320的博客
12-14 1243
这是效果图 思路分析： 一、烟花，可能会存在多个，每个烟花都是独立的对象，需要在点击的一瞬间被创建。因为点击时才创建对象，所以点击事件之前的过程不属于面向对象的过程 二、提前处理好：选择元素，绑定事件，触发事件时，执行面向对象的启动（new）。 OOA:烟花：点击页面，出现运动的元素到达目的之后，炸开到随机的位置 1.创建主题烟花的元素，设置初始位置，颜色，等信息，插入页面。 2.开始运动到鼠标...
js烟花特效
HeyOldThiefSima的博客
07-11 444
​​​​​​Index of /download/release/
礼花背景javascript
07-30
用javascript编写的，页面上背景显示为礼花。
JS面向对象编程之烟花效果
许兆滨的博客
09-22 920
JavaScript面向对象的烟花效果
鼠标点击有烟花效果js特效
10-27
鼠标带烟花特效， 使用js代码实现，含有HTML代码，可以实现效果 可能发错 ，但肯定是鼠标上带效果
js水晶效果 特效 特效
02-09
js水晶效果! 很值得下载看看!资源免费,大家分享!!
js烟花效果 前端
12-27
js烟花效果 前端
JavaScript烟花(fire效果)
小文又困了的博客
09-05 890
【代码】JavaScript烟花(fire效果)
js写烟花特效啊
岁月如歌去，十年弹指间
08-14 2155
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; background-color: black; } &l.
Python 程序的输出 | 第一套
努力是为了站在万人之中，成为别人的光
03-06 3万+
预测以下 python 程序的输出： 程序一： r = lambda q: q * 2 s = lambda q: q * 3 x = 2 x = r(x) x = s(x) x = r(x) print (x) 输出： 24 解释： 在上述程序中，r 和 s 是 lambda 函数或匿名函数，q 是这两个函数的参数。在第一步中，我们将 x 初始化为 2。在第二步中，我们将 x 作为参数传递给 lambda 函数 r，这将返回存储在 x 中的 x*2。也就是说，现在 x = 4。同样，在第三步中，我们将
推荐开源项目：Canvas Confetti - 轻松创建炫酷的JavaScript礼花效果
最新发布
gitblog_00040的博客
03-20 559
推荐开源项目：Canvas Confetti - 轻松创建炫酷的JavaScript礼花效果 canvas-confetti???? performant confetti animation in the browser项目地址:https://gitcode.com/gh_mirrors/ca/canvas-confetti 是一个轻量级、易于使用的JavaScript库，专门用于在网页上生成逼真...
js前端 实现一个在线网页烟花效果
极客七
02-03 538
【代码】js前端 实现一个在线网页烟花效果。
HTML5和JS实现新年礼花效果
cnds123的专栏
12-31 1134
HTML5和JS实现新年礼花效果。2023兔年再见，2024龙年来临了！ 祝愿读者朋友们在2024年里，身体健康，心灵愉悦，梦想成真。
vue js礼花特效
11-05
Vue.js 礼花特效是一种在 Vue.js 框架中实现的视觉效果，其目的是为了给网页增添一些动态、生动的元素，使用户的交互体验更加丰富。通过使用 Vue.js 礼花特效，可以在网页上绘制出炫目的礼花状图案，并且可以通过一些配置项来控制礼花的颜色、形状、数量等参数，以满足不同用户的需求。 在实现 Vue.js 礼花特效的过程中，主要涉及到 Vue.js 组件、动画效果、以及图形绘制等知识。首先，可以创建一个 Vue.js 组件，用于渲染礼花特效的画布，并利用 Vue.js 的数据双向绑定技术来实时更新礼花的参数配置。然后，利用 CSS3 或者 Canvas 技术来实现礼花的动画效果，包括花瓣的飞舞、绽放等效果。最后，可以通过一些事件监听和用户交互，来触发礼花的展示和消失，并根据用户的操作来调整礼花的表现形式。 使用 Vue.js 礼花特效可以为网页增加一些页面效果和互动性，使用户在浏览网页的过程中更加愉悦和有趣。它广泛应用于各种场景，包括节日祝福、庆祝活动、营销宣传等。通过合理的设计和实现，可以打造出炫丽的礼花特效，吸引用户的注意力，并提升用户对页面的留存和参与度。同时，Vue.js 礼花特效也可以通过一些优化和性能调整，提高页面的加载速度和流畅度，确保用户的体验质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值