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

yedf 發布于2019-08-29 13:54 / 964人閱讀

摘要：說明這次實現的雪花飄落的效果很簡單，主要是為了練習練習中的定時器，和。簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執行，可以先把第一次修改的樣式渲染后，在進行第二次的修改，雪花就會動了。

說明

這次實現的雪花飄落的效果很簡單，主要是為了練習練習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指定的任務。

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

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

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

注意：
因為定時器添加的事件，會在下一次Event Loop執行，所以第二個定時器的作用是為了讓生成的雪花先拼接到頁面中渲染出來后，再修改他的樣式，這樣才能讓他動起來，如果沒有這個定時器，瀏覽器會把所有的JS代碼都執行完之后才渲染頁面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒法動了，這和瀏覽器的線程有關系。

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

如果想了解更詳細的東西推薦看看下面的文章
js setTimeOut()
原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
哪些地方會出現css阻塞，哪些地方會出現js阻塞？
瀏覽器~加載，解析，渲染

總結

這次實現的雪花飄落效果，要說麻煩的地方，就是第二個定時器那里了，為什么用了這個定時器就能讓雪花動起來，文中只是簡單的說了一下，更加詳細的還是看看推薦的那幾篇文章吧！不過在這之前，要先弄明白定時器是怎么回事才可以。
不明白定時器看這里，定時器
不明白為什么用第二個定時器看這幾篇文章
js setTimeOut()
原來 CSS 與 JS 是這樣阻塞 DOM 解析和渲染的
哪些地方會出現css阻塞，哪些地方會出現js阻塞？
瀏覽器~加載，解析，渲染

JQuery版

云服務器 GPU云服務器 jquery飄落效果這種效果怎么實現簡單javascript 實現放大鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112783.html

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

摘要：說明這次實現的雪花飄落的效果很簡單，主要是為了練習練習中的定時器，和。簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執行，可以先把第一次修改的樣式渲染后，在進行第二次的修改，雪花就會動了。說明這次實現的雪花飄落的效果很簡單，主要是為了練習練習JavaScript中的定時器，setTimeout 和 setInterval。效果圖 showImg(https://seg...

ShowerSun 2019-08-21 17:51 評論0 收藏0
開源造輪子：一個簡潔，高效，輕量級，酷炫的不要不要的canvas粒子運動插件庫

摘要：一開篇哈哈哈，感謝標題黨的蒞臨雖然標題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。當然，配置不同的參數值，或許可以得到挺多不同的特效呢上面已經演示過標配的粒子無序運動啦，下面演示后面兩種。一：開篇哈哈哈，感謝標題黨的蒞臨~ 雖然標題有點夸張的感覺，但實際上，插件庫確實是簡潔，高效，輕量級，酷炫酷炫的咯。廢話不多說，先來看個標配例子吧： http://co...

Anonymous1 2019-08-20 11:38 評論0 收藏0
JavaScript實現爆炸碎片的圖片切換效果

摘要：總的來說就是兩步生成小的元素，整齊的覆蓋在大的元素上，像下圖這樣為了方便看，把每個小元素，分開了些。鼠標移入時，讓所有小元素動起來，主要是改變小元素的屬性的值具體實現的代碼也并不多，下面是注釋很詳細的代碼。說明和大家分享一個看上去很酷的效果，先來看效果圖吧！ showImg(https://segmentfault.com/img/remote/1460000016194106);...

xialong 2019-08-22 17:12 評論0 收藏0
用canvas實現簡單的下雪效果

摘要：并且通過函數營造出雪花左右飄動的效果，當雪花落到窗口外面后將雪花重新移動到窗口上方再次下落，實現如下速度和密度實際上不是平方的關系，這么些是為了效果更加錯落有致完成，我們來看一下實際效果也可以去看看嗯，還挺像那么回事兒首先新建一個html文件，將body的背景設置為天空的那種深藍色，并創建一個canvas，canvas的操作邏輯都放在snow.js中： body {...

U2FsdGVkX1x 2019-08-02 12:02 評論0 收藏0