这个盛夏，来一场“清凉”的代码雨！

背景设置为黑色。.container{显示：flex;弹性方向：列；证明内容：居中；对齐项目：居中；左：0px；顶部：0px；宽度：100%；高度：100%；背景色：黑色；overflow:hidden;}.title{字体大小：60px;文本对齐：居中；宽度：100%；高度：40%；margin:10px;}@mediascreenand(device-type:default)and(orientation:landscape){.title{font-size:60px;}}@mediascreenand(device-type:tablet)and(orientation:landscape){.title{font-size:100px;}}2.定义变量这里我们定义如下几个变量：变量含义code_raincanvas对象rain_y每一滴代码雨的y坐标columns每行多少滴雨font_sizeraincontext上下文对象初始化具体分析可以在代码注释中找到。data:{title:"",rain_y:[],font_size:16,columns:0,context:undefined,code_rain:undefined,},onInit(){//初始化字体大小this.font_size=16;//屏幕宽度/字体大小=列数=每行有多少个雨滴this.columns=1080/this.font_size;//y坐标全部初始化为1for(vari=0;i{//画成黑色，(r,g,b,transparency)，透明度不能为1或0，否则要么全黑，要么数字重叠，无法体现渐变效果.that.context.fillStyle="rgba(0,0,0,0.1)";//绘制填充画布，每次刷新覆盖that.context.fillRect(0,0,1080,2340);//经典greenfontthat.context.fillStyle="green";//字体大小that.context.font=this.font_size+"px";//逐行绘制for(vari=0;i(2340*0.5)&&Math.random()>0.85)//满足条件从头开始that.rain_y[i]=0;//将y坐标向下移动.rain_y[i]++;}},50);},4。效果3.添加一些颜色我们可以添加一些颜色数组来动态改变数字雨的颜色。比如这里选择了经典的赛博朋克配色。color:["#FF72D9D2","#FF386FDB","#FFC93C6D","#FFFF0000","#FFB4814A"]然后，用随机颜色替换“绿色”。导出默认{数据：{标题：“”，rain_y：[]，字体大小：16，列：0，上下文：未定义，code_rain：未定义，颜色：[“#FF72D9D2”，“#FF386FDB”，“#FFC93C6D”，"#FFFF0000","#FFB4814A"]},onInit(){//初始化字体大小this.font_size=16;//屏幕宽度/字体大小=列数=每行有多少个雨滴this.columns=1080/this.font_size;//所有y坐标都初始化为1for(vari=0;i{//draw变成黑色，(r,g,b,transparency)，透明度不能为1或0，否则要么黑屏，要么重叠数字，无法体现渐变影响。that.context.fillStyle="rgba(0,0,0,0.1)";//绘制填充画布，每次刷新覆盖that.context.fillRect(0,0,1080,2340);//随机颜色that.context.fillStyle=this.color[this.ranNum(0,4)];//字体大小that.context.font=this.font_size+"px";//逐行绘制for(vari=0;i(2340*0.5)&&Math.random()>0.85)//满足条件从头开始that.rain_y[i]=0;//将y坐标向下移动.rain_y[i]++;}},50);},ranNum(minNum,maxNum){switch(arguments.length){案例1：返回parseInt(Math.random()*minNum+1,10);休息;情况2：返回parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);休息;默认值：返回0；休息;}},}1、效果文章相关附件点击下方原文链接下载。https://ost.51cto.com/resource/2191。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。