如何在这段代码中创建一个随机对象？

Question

我在互联网上找到了这个脚本，并决定使用标准的星号和字体。字体本身是通过 CSS 连接的。在 JS 文件中，我指出了需要哪些雪花飘落。但如果我把它们放在一起，它们会以三片雪花为一组排成一行，但不是随机的，也不是一个接一个：var snowmax=25;var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")var snowtype=("Arial");var snowletter=new Array("\u2744 \u2743 \u2742",);var sinkspeed=0.5; var snowmaxsize=30;var snowminsize=8;var snowingzone=1;var snow=new Array();var marginbottom;var marginright;var timer;var i_snow=0;var x_mv=new Array();var crds=new Array();var lftrght=new Array();var browserinfos=navigator.userAgent;var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);var ns6=document.getElementById&&!document.all;var opera=browserinfos.match(/Opera/);var browserok=ie5||ns6||opera;function randommaker(range) {    rand=Math.floor(range*Math.random());    return rand;}function initsnow() {    if (ie5 || opera) {        marginbottom=document.body.clientHeight;        marginright=document.body.clientWidth;    }    else if (ns6) {        marginbottom=window.innerHeight;        marginright=window.innerWidth;    }    var snowsizerange=snowmaxsize-snowminsize;    for (i=0;i<=snowmax;i++) {        crds[i]=0;        lftrght[i]=Math.random()*15;        x_mv[i]=0.03+Math.random()/10;        snow[i]=document.getElementById("s"+i);        snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];        snow[i].size=randommaker(snowsizerange)+snowminsize;        snow[i].style.fontSize=snow[i].size+"px";        snow[i].style.color=snowcolor[randommaker(snowcolor.length)];        snow[i].sink=sinkspeed*snow[i].size/5;    }    movesnow();}我的 JavaScript 能力不强，因此我的问题是：如何让它随机落下，一次一个？我自己无法找到解决方案。

Answer 1

将三个雪花组合在一起的行如下：

var snowletter=new Array("\u2744 \u2743 \u2742",);

要随机使用这三个之一，请将此行更改为：

var snowletter="\u2744\u2743\u2742";

并且还要更改以下行：

document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");

到：

document.write("<span id='s"+i

               +"' style='position:absolute;top:-"+snowmaxsize+"px;'>"

               + snowletter[Math.floor(Math.random()*snowletter.length)]

               +"</span>");

在这里您可以看到结果：

var snowmax=25;

var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

var snowtype=("Arial");

var snowletter="\u2744\u2743\u2742";

var sinkspeed=0.5; 

var snowmaxsize=30;

var snowminsize=8;

var snowingzone=1;

var snow=new Array();

var marginbottom;

var marginright;

var timer;

var i_snow=0;

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent;

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);

var ns6=document.getElementById&&!document.all;

var opera=browserinfos.match(/Opera/);

var browserok=ie5||ns6||opera;

function randommaker(range) {

    rand=Math.floor(range*Math.random());

    return rand;

}

function initsnow() {

    if (ie5 || opera) {

        marginbottom=document.body.clientHeight;

        marginright=document.body.clientWidth;

    }

    else if (ns6) {

        marginbottom=window.innerHeight;

        marginright=window.innerWidth;

    }

    var snowsizerange=snowmaxsize-snowminsize;

    for (i=0;i<=snowmax;i++) {

        crds[i]=0;

        lftrght[i]=Math.random()*15;

        x_mv[i]=0.03+Math.random()/10;

        snow[i]=document.getElementById("s"+i);

        snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];

        snow[i].size=randommaker(snowsizerange)+snowminsize;

        snow[i].style.fontSize=snow[i].size+"px";

        snow[i].style.color=snowcolor[randommaker(snowcolor.length)];

        snow[i].sink=sinkspeed*snow[i].size/5;

        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

        snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);

        snow[i].style.left=snow[i].posx+"px";

        snow[i].style.top=snow[i].posy+"px";

    }

    movesnow();

}

function movesnow() {

    for(i=0;i<=snowmax;i++) {

        crds[i]+=x_mv[i];

        snow[i].posy+=snow[i].sink;

        snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";

        snow[i].style.top=snow[i].posy+"px";

        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {

            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

            snow[i].posy=0;

        }

    }

    var timer=setTimeout("movesnow()",50);

}

for (i=0;i<=snowmax;i++) {

   document.write("<span id='s"+i

                  +"' style='position:absolute;top:-"+snowmaxsize+"px;'>"

                  + snowletter[Math.floor(Math.random()*snowletter.length)]

                  +"</span>");

}

if (browserok) {

    window.onload=initsnow;

}

Answer 2

将您的雪更改snowletter为数组：new Array("\u2744", "\u2743", "\u2742")并更改随机采雪的方式：snowletter[Math.floor(Math.random()*snowletter.length)]

示例代码：

var snowmax=25;

var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

var snowtype=("Arial");

var snowmax=25;

var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

var snowtype=("Arial");

var snowletter=new Array("\u2744", "\u2743", "\u2742");

var sinkspeed=0.5;

var snowmaxsize=30;

var snowminsize=8;

var snowingzone=1;

var snow=new Array();

var marginbottom;

var marginright;

var timer;

var i_snow=0;

var x_mv=new Array();

var crds=new Array();

var lftrght=new Array();

var browserinfos=navigator.userAgent;

var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);

var ns6=document.getElementById&&!document.all;

var opera=browserinfos.match(/Opera/);

var browserok=ie5||ns6||opera;

function randommaker(range) {

    rand=Math.floor(range*Math.random());

    return rand;

}

function initsnow() {

    if (ie5 || opera) {

        marginbottom=document.body.clientHeight;

        marginright=document.body.clientWidth;

    }

    else if (ns6) {

        marginbottom=window.innerHeight;

        marginright=window.innerWidth;

    }

    var snowsizerange=snowmaxsize-snowminsize;

    for (i=0;i<=snowmax;i++) {

        crds[i]=0;

        lftrght[i]=Math.random()*15;

        x_mv[i]=0.03+Math.random()/10;

        snow[i]=document.getElementById("s"+i);

        snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];

        snow[i].size=randommaker(snowsizerange)+snowminsize;

        snow[i].style.fontSize=snow[i].size+"px";

        snow[i].style.color=snowcolor[randommaker(snowcolor.length)];

        snow[i].sink=sinkspeed*snow[i].size/5;

        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

        snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);

        snow[i].style.left=snow[i].posx+"px";

        snow[i].style.top=snow[i].posy+"px";

    }

    movesnow();

}

function movesnow() {

    for(i=0;i<=snowmax;i++) {

        crds[i]+=x_mv[i];

        snow[i].posy+=snow[i].sink;

        snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";

        snow[i].style.top=snow[i].posy+"px";

        if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {

            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

            snow[i].posy=0;

        }

    }

    var timer=setTimeout("movesnow()",50);

}

for (i=0;i<=snowmax;i++) {

    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter[Math.floor(Math.random()*snowletter.length)]+"</span>");

}

if (browserok) {

    window.onload=initsnow;

}

Answer 3

如果您只是寻找一片雪花而不是三片落下的雪花，那么难道不是顶部的雪信声明为您提供了三片雪花...将其更改为只有一个 \u 字符，您就会得到一个...

var snowletter=new Array("\u2744 \u2743 \u2742",);

改成

var snowletter=new Array("\u2744");

参见https://jsfiddle.net/Abeeee/m0aq57ng/