黑客帝国特效(html+css+js)

沃梦达教程前端开发

2023-10-28

黑客帝国特效直接上代码：!DOCTYPE htmlhtmlheadmeta charset=utf-8title黑客帝国/titlescriptvar num=[0,1,2,3,4,5,6,7,8,9]; //随机数字var howmany=100; //多少个数字var speed=50...

黑客帝国特效

直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
           黑客帝国
        </title>
        <script>
            var num=[0,1,2,3,4,5,6,7,8,9];        //随机数字
            var howmany=100;      //多少个数字
            var speed=50;         //速度
            
            var movey=speed;

            var drop=new Array();     //每个数字的层
            var xx=new Array();       //每个数字点的位置
            var yy=new Array();        

            var mv=new Array();
           
                //初始化 howmany个数字的层及它的初始化位置
                for(var i=0;i<howmany;i++){
                    var j=Math.floor(Math.random()*9);
                    document.write("<div id='div"+i+"' style='position:absolute;'>"+num[j]+"</div>");
                    drop[i]=document.getElementById("div"+i).style;

                    //最大显示范围
                    var maxx=window.innerWidth;
                    var maxy=window.innerHeight;

                    //每个点的位置的计算
                    xx[i]=maxx*Math.random();
                    yy[i]=maxy*Math.random();

                    //每个点的位置
                    drop[i].left=xx[i]+"px";
                    drop[i].top=yy[i]+"px";

                    //每个点的速度
                    mv[i]=Math.random()*speed;
                    //设置点的外观
                    drop[i].fontSize=Math.random()*10+10+"px";

                   
                    drop[i].color="#33FF33";

                    

                    
               
            }

               //修改每个点的位置
               function init(){
                for(var i=0;i<howmany;i++){
                    // xx[i]+=movex;
                    yy[i]+=movey;
                    //越界
                    if(xx[i]<=0){
                        xx[i]=maxx;
                    }
                    if(yy[i]>maxy){
                        yy[i]=10;
                    }
                    // drop[i].left=xx[i]+"px";
                    drop[i].top=yy[i]+"px";
                }
                setTimeout("init()",200);
            }
        </script>
    </head>

    <body bgcolor="black" onl oad="init()">

    </body>
</html>

运行效果如图(可以自己自定义数字的多少):