天上飘雪花js

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 720 阅读

文章标签：

#javascript #雪花

网站前台专栏收录该内容

17 篇文章

订阅专栏

本文展示了一段JavaScript代码，实现动态生成并控制雪花在页面上随机飘落的效果，包括雪花的颜色、大小、下落速度及水平振动。通过简单的算法模拟自然现象，提升用户体验。

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

<html><head></head>
<script language="javascript">
var snow_size=new Array();  //存储随机雪花大小
var snow_color=new Array(); //存储随机雪花颜色
var num=50; //雪花的个数
var smallest=5; //雪花的最小尺寸
var largest=30; //雪花的最大尺寸
var dx=new Array(); //水平振动参数
var am=new Array(); //水平振动幅度
var xp=new Array(); // 雪花下落的水平位置
var yp=new Array(); //雪花下落的垂直位置
var stx=new Array(); //水平位置步距
var sty=new Array(); //垂直位置步距
var doc_width; //页面宽度
var doc_height; //页面高度
//随机产生雪花大小
function makeSize(){
    return smallest+Math.random()*largest;
}
//彩色雪花
function makeColor(){
    //return 'rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';  //需有“’”，原因是当作字符串返回
    return 'rgb(255,255,255)';
}
//初始化参数
function init(){
    doc_width=document.body.clientWidth;
    doc_height=document.body.clientHeight;
    for(var i=0;i<num;i++){
        snow_color[i]=makeColor(); //雪花的颜色
        snow_size[i]=makeSize(); //雪花的大小
        dx[i]=0;  //设置每个雪花还没飘落时候的振幅参数
        xp[i]=Math.random()*(doc_width-40); //设置每个雪花随机下落时候的水平开始位置
        yp[i]=Math.random()*(doc_height-40); //设置每个雪花随机下落时候的垂直开始位置
        am[i]=Math.random()*20;  //设置每个雪花下落时候的振幅
        stx[i]=0.02+Math.random()/10; //水平移动步距
        sty[i]=0.7+Math.random();//垂直移动步距
        document.write("<span id='snow_"+i+"' style='position:absolute;z-index:eval_r(30"+i+");visibility:visible;top:15px;" +
            "left:15px;font-size:"+snow_size[i]+";color:"+snow_color[i]+"'>*</span>");
    }
}
function snow(){
    for(var i=0;i<num;i++){
    yp[i] +=sty[i];
        if(yp[i]>doc_height-50){  //如果到底底部，则回到顶部，重设此朵雪花所有的参数
         xp[i]=Math.random()*(doc_width-am[i]-20);
         yp[i]=0;
         stx[i]=0.02+Math.random()/10;
         sty[i]=0.7+Math.random();
        }
    dx[i]+=stx[i];
    document.getElementById("snow_"+i).style.top=yp[i];
    document.getElementById("snow_"+i).style.left=xp[i]+am[i]*Math.sin(dx[i]); //让雪花在水平方向在正弦波的范围内摆动（-am[i]->am[i]）
    }
    setTimeout("snow()",10);
}
</script>
<body bgcolor="green">

</body>
<script language="javascript">
    init();
    snow();
</script>
</html>