簡單說 JavaScript實現雪花飄落效果

時間 2019-11-10

標籤簡單 javascript 實現雪花飄落效果欄目 JavaScript 简体版

原文原文鏈接

說明

此次實現的雪花飄落的效果很簡單，主要是爲了練習練習JavaScript中的定時器，setTimeout 和 setInterval。javascript

效果圖

解釋

setTimeout()
setTimeout函數用來指定某個函數或某段代碼，在多少毫秒以後執行。它返回一個整數，表示定時器的編號，之後能夠用來取消這個定時器。css

var timerId = setTimeout(func|code, delay)

上面代碼中，setTimeout函數接受兩個參數，第一個參數func|code是將要推遲執行的函數名或者一段代碼，第二個參數delay是推遲執行的毫秒數。 html

setInterval()
setInterval函數的用法與setTimeout徹底一致，區別僅僅在於setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。前端

clearTimeout()，clearInterval()
setTimeout和setInterval函數，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函數，就能夠取消對應的定時器。java

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

clearTimeout(id1);
clearInterval(id2);

注意：jquery

setTimeout 和 setInterval 必需要等到當前腳本的同步任務和「任務隊列」中已有的事件，所有處理完之後，纔會執行setTimeout指定的任務。

這裏就不細說 setTimeout 和 setInterval的概念了，
想詳細瞭解的請看這裏，定時器瀏覽器

咱們繼續說實現雪花飄落的效果
主要是如下4步：
一、定義一片雪花模板；
二、設置第一個定時器，週期性定時器，每隔一段時間生成一片雪花；
三、設置第二個定時器，一次性定時器，當第一個定時器生成雪花，並在頁面上渲染出來後，修改雪花的樣式，讓雪花動起來；
四、設置第三個定時器，當雪花落下後，刪除雪花。 app

上面是實現的思路，下面寫出具體的代碼，下面的代碼是JS原生代碼，最後會附上JQuery實現的代碼，思路都同樣。dom

<!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() {
            //    一、定義一片雪花模板
            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;
            //二、設置第一個定時器，週期性定時器，每隔一段時間（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};
                            `;

                    //四、設置第三個定時器，當雪花落下後，刪除雪花。
                    setTimeout(function() {
                        cloneFlake.remove();
                    }, durationTime);
                }, 0);

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

注意：
由於定時器添加的事件，會在下一次Event Loop執行，因此第二個定時器的做用是爲了讓生成的雪花先拼接到頁面中渲染出來後，再修改他的樣式，這樣才能讓他動起來，若是沒有這個定時器，瀏覽器會把全部的JS代碼都執行完以後才渲染頁面，這樣的話後面的樣式就直接覆蓋前面的樣式了，雪花就無法動了，這和瀏覽器的線程有關係。函數

簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執行，能夠先把第一次修改的樣式渲染後，在進行第二次的修改，雪花就會動了。

總結

此次實現的雪花飄落效果，要說麻煩的地方，就是第二個定時器那裏了，爲何用了這個定時器就能讓雪花動起來，文中只是簡單的說了一下，更加詳細的仍是看看推薦的那幾篇文章吧！不過在這以前，要先弄明白定時器是怎麼回事才能夠。
不明白定時器看這裏，定時器
不明白爲何用第二個定時器看這幾篇文章
js setTimeOut()
原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
 哪些地方會出現css阻塞，哪些地方會出現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() {
            //一、定義一片雪花模板
            var flake = $("<div>").css({
                "position": "absolute",
                "color": "#fff"
            }).html("❄");

            //獲取頁面的寬度，利用這個數來算出，雪花開始時left的值
            var documentWidth = $(document).width();

            //獲取頁面的高度 至關於雪花下落結束時Y軸的位置
            var documentHieght = $(document).height();

            //定義生成一片雪花的毫秒數
            var millisec = 100;
            //二、設置第一個定時器，週期性定時器，每隔一段時間（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();

                //三、克隆一個雪花模板,定義雪花的初始樣式，拼接到頁面中
                flake.clone().appendTo($("body")).css({
                    "left": startLeft,
                    "opacity": startOpacity,
                    "font-size": flakeSize,
                    "top": "-25px",
                }).animate({ //執行動畫
                    "left": endLeft,
                    "opacity": endOpacity,
                    "top": documentHieght
                }, durationTime, function() {
                    //四、當雪花落下後，刪除雪花。
                    $(this).remove(); 
                });
            }, millisec);
        };
        snow();
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。