专栏首页FEWY简单说 JavaScript实现雪花飘落效果

简单说 JavaScript实现雪花飘落效果

说明

这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。

效果图

解释

setTimeout() setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay)

上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。

setInterval() setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

clearTimeout(),clearInterval() setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

注意:

setTimeout 和 setInterval 必须要等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,才会执行setTimeout指定的任务。

主要是以下4步: 1、定义一片雪花模板; 2、设置第一个定时器,周期性定时器,每隔一段时间生成一片雪花; 3、设置第二个定时器,一次性定时器,当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来; 4、设置第三个定时器,当雪花落下后,删除雪花。

上面是实现的思路,下面写出具体的代码,下面的代码是JS原生代码,最后会附上JQuery实现的代码,思路都一样。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #000;
            /*防止出现向下滚动条*/
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script>
        function snow() {
            //  1、定义一片雪花模板
            var flake = document.createElement('div');
            // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
            flake.innerHTML = '❆';
            flake.style.cssText = 'position:absolute;color:#fff;';

            //获取页面的高度 相当于雪花下落结束时Y轴的位置
            var documentHieght = window.innerHeight;
            //获取页面的宽度,利用这个数来算出,雪花开始时left的值
            var documentWidth = window.innerWidth;

            //定义生成一片雪花的毫秒数
            var millisec = 100;
            //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
            setInterval(function() { //页面加载之后,定时器就开始工作
                //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
                var startLeft = Math.random() * documentWidth;

                //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
                var endLeft = Math.random() * documentWidth;

                //随机生成雪花大小
                var flakeSize = 5 + 20 * Math.random();

                //随机生成雪花下落持续时间
                var durationTime = 4000 + 7000 * Math.random();

                //随机生成雪花下落 开始 时的透明度
                var startOpacity = 0.7 + 0.3 * Math.random();

                //随机生成雪花下落 结束 时的透明度
                var endOpacity = 0.2 + 0.2 * Math.random();

                //克隆一个雪花模板
                var cloneFlake = flake.cloneNode(true);

                //第一次修改样式,定义克隆出来的雪花的样式
                cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                            transition:${durationTime}ms;
                    `;

                //拼接到页面中
                document.body.appendChild(cloneFlake);

                //设置第二个定时器,一次性定时器,
                //当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来;
                setTimeout(function() {
                    //第二次修改样式
                    cloneFlake.style.cssText += `
                                left: ${endLeft}px;
                                top:${documentHieght}px;
                                opacity:${endOpacity};
                            `;

                    //4、设置第三个定时器,当雪花落下后,删除雪花。
                    setTimeout(function() {
                        cloneFlake.remove();
                    }, durationTime);
                }, 0);

            }, millisec);
        }
        snow();
    </script>
</body>
</html>

注意: 因为定时器添加的事件,会在下一次Event Loop执行,所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后,再修改他的样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。

简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。

JQuery版

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #000;
            /*防止出现向下滚动条*/
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        function snow() {
            //1、定义一片雪花模板
            var flake = $("<div>").css({
                "position": "absolute",
                "color": "#fff"
            }).html("❄");

            //获取页面的宽度,利用这个数来算出,雪花开始时left的值
            var documentWidth = $(document).width();

            //获取页面的高度 相当于雪花下落结束时Y轴的位置
            var documentHieght = $(document).height();

            //定义生成一片雪花的毫秒数
            var millisec = 100;
            //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花;
            setInterval(function() {
                //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置
                var startLeft = Math.random() * documentWidth;

                //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置
                var endLeft = Math.random() * documentWidth;

                //随机生成雪花大小
                var flakeSize = 5 + 20 * Math.random();

                //随机生成雪花下落持续时间
                var durationTime = 4000 + 7000 * Math.random();

                //随机生成雪花下落 开始 时的透明度
                var startOpacity = 0.7 + 0.3 * Math.random();

                //随机生成雪花下落 结束 时的透明度
                var endOpacity = 0.2 + 0.2 * Math.random();

                //3、克隆一个雪花模板,定义雪花的初始样式,拼接到页面中
                flake.clone().appendTo($("body")).css({
                    "left": startLeft,
                    "opacity": startOpacity,
                    "font-size": flakeSize,
                    "top": "-25px",
                }).animate({ //执行动画
                    "left": endLeft,
                    "opacity": endOpacity,
                    "top": documentHieght
                }, durationTime, function() {
                    //4、当雪花落下后,删除雪花。
                    $(this).remove(); 
                });
            }, millisec);
        };
        snow();
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript樱花飘落效果实现

    既然是JavaScript,那么支持HTML是肯定的(废话),也适用于WordPress,Typecho等主题(还是废话)。

    iVampireSP.com
  • 使用Photoshop实现雪花飘落的效果

    Zoctopus
  • OpenGL Shader实例分析(7)雪花飘落效果

    这段代码处于fragment shader中,意味着屏幕上每个点都会进行上述的算法。具体如下,遍历贴图中该点周围的点(上面的代码中为距离该点为20单位的圆上的点...

    砸漏
  • 手撸一个物体下落的控件,实现雪花飘落效果

    Android自定义View——从零开始实现雪花飘落效果 感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化。笔者参考原文作者的源码,做了一点修改,实...

    饮水思源为名
  • Android自定义View——从零开始实现雪花飘落效果

    前言:转眼已是十一月下旬了,天气慢慢转冷,不知道北方是不是已经开始下雪了呢?本期教程我们就顺应季节主题,一起来实现 雪花飘落的效果吧。本篇效果思路参考自国外大神...

    用户2802329
  • python实现雪花飘落效果实例讲解及源码分享!

    Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及相关电子版书籍,欢迎前来领取...

    python学习教程
  • 用canvas实现简单的下雪效果

    首先新建一个html文件,将body的背景设置为天空的那种深蓝色,并创建一个canvas,canvas的操作逻辑都放在snow.js中:

    MudOnTire
  • 网页开发背景出现下雪特效

    今天我来给大家介绍一种网页特效,这种网页特效是是背景出现下雪的效果,非常的绚丽。如果说下雪不太适合自己的网页,需要飘落一些花瓣或心之类的,那么同样可以使用这个特...

    OECOM
  • OpenCV-Python图形图像处理:制作雪花飘落特效

    来源:https://blog.csdn.net/LaoYuanPython/article/details/115298737

    AI算法与图像处理

扫码关注云+社区

领取腾讯云代金券