javascript 烟花效果

最新推荐文章于 2023-09-05 15:34:43 发布

原创最新推荐文章于 2023-09-05 15:34:43 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文将介绍如何利用JavaScript创建绚丽的烟花动画效果，通过控制烟花的发射、上升和爆炸，营造出多彩的视觉体验。内容包括关键代码解析，以及实现动态变化的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


最终效果 请看  [http://www.wzx1997.cc/firework.html](http://www.wzx1997.cc/firework.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>firework</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #000;
            overflow: hidden;
        }
        .firework{
            position: absolute;
            width: 15px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
        }
        .fireworks{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            background-color: red;
        }
        .info h1{
            color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .info{
            display: none;
        }
        .tips{
            color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 25px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <div class="tips">请点击屏幕</div>
    <div class="info">
        <h1>hello hello !</h1>
    </div>
    <script type="text/javascript">
        infor = document.getElementsByClassName('info')[0];
        infors = document.getElementsByTagName('h1')[0];
        document.onclick = function(ev){
            infors.style.color = color();
            infor.style.display = "block";
            var ev = ev || window.event;
            console.log();
            var oDiv = document.createElement("div");
            oDiv.className  = "firework"
            x = ev.clientX;
            y = ev.clientY;
            oDiv.style.left = x + "px";
            oDiv.style.backgroundColor = color();
            oDiv.style.top = document.body.clientHeight  + "px";
            document.body.appendChild(oDiv);

            var speed = 10;
            var timer = setInterval(function(){
                oDiv.style.top = oDiv.offsetTop - speed + "px";
                if(oDiv.offsetTop<=ev.clientY){
                    oDiv.offsetTop = ev.clientY;
                    clearInterval(timer);
                    document.body.removeChild(oDiv);
                    firework(x,y);
                }
            },1000/60)




            function firework(x,y){
                var n = Math.ceil(Math.random()*50) + 25;
                var sDiv = [];
                for(var i=0;i<n;i++){
                    sDiv[i] = document.createElement("div");
                    sDiv[i].className = "fireworks";
                    sDiv[i].style.left = x + "px";
                    sDiv[i].style.top = y + "px";
                    sDiv[i].style.backgroundColor = color();
                    sDiv[i].speedx = Math.ceil(Math.random()*20) - 10;
                    sDiv[i].speedy = Math.ceil(Math.random()*20) - 10;
                    document.body.appendChild(sDiv[i]);
                }



                    setInterval(function(){
                    for(var i =0; i<n ; i++){

                        sDiv[i].style.left = sDiv[i].offsetLeft + sDiv[i].speedx + "px";
                        sDiv[i].style.top = sDiv[i].offsetTop + sDiv[i].speedy + "px";

                        if(sDiv[i].speedy < 30){
                            sDiv[i].speedy ++;
                        }


                        if(sDiv[i].offsetLeft<0 || sDiv[i].offsetLeft > document.body.offsetWidth || sDiv[i].offsetTop>document.body.offsetHeight){
                            document.body.removeChild(sDiv[i]);
                        }
                    }
                },1000/60)
            }
        }


        function color(){
                var r =Math.ceil(Math.random()*245)+10;
                var g =Math.ceil(Math.random()*245)+10;
                var b =Math.ceil(Math.random()*245)+10;
                return "rgb("+r+","+g+" , "+b+")";
            }


    </script>
</body>
</html>