js+html+css实现简单的代码雨生成器

最新推荐文章于 2025-08-23 18:49:13 发布

迟r

最新推荐文章于 2025-08-23 18:49:13 发布

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

文章标签： js css html 代码雨

本文链接：https://blog.csdn.net/qq_42584511/article/details/96576844

本文介绍如何利用JavaScript、HTML和CSS实现一个简单的代码雨效果。通过提供的效果图和关键源码，读者可以了解到实现过程。需要注意的是，虽然引入了vue-2.5.17.js和bootstrap.css，但实际实现并未使用到Vue。

js+html+css实现简单的代码雨生成器

- 效果图
- 代码如下

效果图

生成器的演示效果

代码如下

下面是主要源码，其中引入的两个文件vue-2.5.17.js（其实没有使用）和bootstrap.css，将它们放在代码外层同级的lib文件夹中。在代码中每步也有详细注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代码雨</title>
    <script src="../lib/vue-2.5.17.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <style>
        /* body{
            margin:0;
            padding: 0;
        } */
        #showdiv{
            width: 800px;
            height: 600px;
            background-color: brown;
            margin: auto;
        }
        canvas{
            width:800px;
            height: 600px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3>代码雨生成器</h3>
        </div>
        <div class="panel-body form-inline">
            文本：<input type="text" class="form-control" id="txt">
            字体：<input type="text" class="form-control" id="ft">
            速度：<input type="text" class="form-control" id="ct">
            <input type="button" class="btn btn-primary" value="生成代码雨" onclick="start()">
        </div>
        <div id="showdiv">
                    <canvas id="canvas"></canvas>
        </div>
    </div>
    <script>
        //获取div对象
        var dv=document.getElementById("showdiv");
        //获取元素对象
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        //准备展示的代码串
        var text;
         //alert(dv.offsetWidth);
        //获取canvas大小
        // alert( dv.getAttribute("width")+" "+dv.height);
        canvas.width=dv.offsetWidth;
        canvas.height=dv.offsetHeight;
        //alert( canvas.width+" "+canvas.height);
       
        


        //求列数
        var fontsize;
        var len;

        var drop=[];//记录y轴相对坐标
        //初始化
        // for(var i=0;i<len;i++){
        //     drop[i]=1;
        // }

        //绘图函数
        function draw(){
            //准备初始填充背景颜色
            ctx.fillStyle='rgba(0, 0, 0, 0.05)';
            
            ctx.fillRect(0,0,canvas.width,canvas.height);
            //alert(canvas.width+" "+canvas.height);
            //设置渐变颜色
            ctx.fillStyle="#0F0";
            ctx.font=fontsize+"px arial"
            //逐行打印
            for(var i=0;i<len;i++){
                //生成随机字符
                var ch=text[Math.floor(Math.random()*text.length)];
                //进行文本填充
                ctx.fillText(ch,i*fontsize,drop[i]*fontsize);
                //当纵坐标超出屏幕时，重置drop[i]
                if(drop[i]*fontsize>canvas.height||Math.random()>0.95){
                    drop[i]=0;
                }
                drop[i]++;
            }
            
        }
        //间隔执行
        //开始执行函数
        function start(){
            //获取操作元素对象
            var txt=document.getElementById("txt");
            var ft=document.getElementById("ft");
            var ct=document.getElementById("ct");
            text=txt.value.toString();
            text=text.split("");//将字符串拆分为数组
            //alert(canvas.width+" "+canvas.height);
            fontsize=ft.value;
            len=canvas.width/fontsize;
            var ctime=ct.value;
            //alert(fontsize+" "+text.length+" "+len);
            //初始化
            for(var i=0;i<len;i++){
                drop[i]=1;
            }
            setInterval(draw,ctime);
        }
    </script>
</body>
</html>