Javascript 在Jquery中创建雪花

我在jquery中创建了雪花。创建和删除div可能会导致脚本无响应。现在我用

animate（）

我想在页面加载的同时生成20个薄片。我不确定何时尝试此方法可能会导致此无响应意味着（浏览器变得太慢）

这是新的jquery代码

function jquerysnow() {

    snowCount = 20;
       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            jquerysnow();
        });



}
jquerysnow();

函数jquerysnow（）{ 雪量=20； 变量雪=$（''）； $（“#雪花”）。预编（雪）； snowX=Math.floor（Math.random（）*$（“#雪花”）.width（）； snowSpd=数学地板（数学随机（）*（500）*20）； css（{'left'：snowX+'px'}）； html（'*'）； 雪人({ 顶部：“500px”， 不透明度：“0”， }，2000，函数（）{ $（this.remove（）； jquerysnow（）； }); } jquerysnow（）； 请参见此处a

现在它一次显示一个薄片一旦薄片自身消失，它会生成下一个。

---

如何在没有无响应脚本的情况下生成多个薄片。

检查一下，非常简单，我刚刚添加了一个触发jquerysnow（）的函数，然后用随机时间再次调用自己

更新代码现在它只会创建20个雪花

snowCount = 0;
function snowFlakes(){
    console.log(snowCount);
    if(snowCount > 20){

        return false
    }else{
    var randomTime = Math.floor(Math.random() * (500) * 2);
    setTimeout(function(){
        snowCount = snowCount +1;
        jquerysnow();
       snowFlakes();
    },randomTime);
    }
}
function jquerysnow() {


       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            //jquerysnow();
        });



}

snowFlakes()

snowCount=0；
函数雪花（）{
控制台日志（雪计数）；
如果（雪量>20）{
返回错误
}否则{
var randomTime=Math.floor（Math.random（）*（500）*2）；
setTimeout（函数（）{
雪量=雪量+1；
jquerysnow（）；
雪花（）；
}，随机时间）；
}
}
函数jquerysnow（）{
变量雪=$（''）；
$（“#雪花”）。预编（雪）；
snowX=Math.floor（Math.random（）*$（“#雪花”）.width（）；
snowSpd=数学地板（数学随机（）*（500）*20）；
css（{'left'：snowX+'px'}）；
html（'*'）；
雪人({
顶部：“500px”，
不透明度：“0”，
}，2000，函数（）{
$（this.remove（）；
//jquerysnow（）；
});
}
雪花

---

看看这个，非常简单，我刚刚添加了一个函数，它触发jquerysnow（），然后用随机时间再次调用自己

更新代码现在它只会创建20个雪花

snowCount = 0;
function snowFlakes(){
    console.log(snowCount);
    if(snowCount > 20){

        return false
    }else{
    var randomTime = Math.floor(Math.random() * (500) * 2);
    setTimeout(function(){
        snowCount = snowCount +1;
        jquerysnow();
       snowFlakes();
    },randomTime);
    }
}
function jquerysnow() {


       var snow = $('<div class="snow"></div>');
        $('#snowflakes').prepend(snow);
        snowX = Math.floor(Math.random() * $('#snowflakes').width());
        snowSpd = Math.floor(Math.random() * (500) * 20);

        snow.css({'left':snowX+'px'});
    snow.html('*');
        snow.animate({
            top: "500px",
            opacity : "0",

        }, 2000, function(){
            $(this).remove();
            //jquerysnow();
        });



}

snowFlakes()

snowCount=0；
函数雪花（）{
控制台日志（雪计数）；
如果（雪量>20）{
返回错误
}否则{
var randomTime=Math.floor（Math.random（）*（500）*2）；
setTimeout（函数（）{
雪量=雪量+1；
jquerysnow（）；
雪花（）；
}，随机时间）；
}
}
函数jquerysnow（）{
变量雪=$（''）；
$（“#雪花”）。预编（雪）；
snowX=Math.floor（Math.random（）*$（“#雪花”）.width（）；
snowSpd=数学地板（数学随机（）*（500）*20）；
css（{'left'：snowX+'px'}）；
html（'*'）；
雪人({
顶部：“500px”，
不透明度：“0”，
}，2000，函数（）{
$（this.remove（）；
//jquerysnow（）；
});
}
雪花

---

我刚刚写完一篇关于这个主题的文章，我想与大家分享一下

不过，它不是很重的jQuery，大部分是纯的好的旧javascript。但它能产生相当不错的降雪效果

---

因此，对于任何感兴趣的人，

我刚刚完成了一篇关于这个主题的文章，我想我会与大家分享

不过，它不是很重的jQuery，大部分是纯的好的旧javascript。但它能产生相当不错的降雪效果

---

因此，对于任何感兴趣的人来说，

一件小事，将

overflow:hidden

添加到主体中。非常好：）添加jquerysnow（）；两次或三次为多个雪花。（在脚本末尾）可能有更多的方法，但我只知道这一种：）如果您只需要支持最新的浏览器，您可以生成元素，然后使用CSS（包括正弦波来回浮动效果）制作动画。jQuery是JavaScript。有一点，添加

overflow:hidden

。非常好：）添加jquerysnow（）；两次或三次为多个雪花。（在脚本末尾）可能有更多的方法，但我只知道这一种：）如果只需要支持最新的浏览器，您可以生成元素，然后使用CSS（包括正弦波来回浮动效果）制作动画。jQuery是JavaScript。