簡(jiǎn)單說(shuō) JavaScript實(shí)現(xiàn)雪花飄落效果

yedf 發(fā)布于2019-08-29 13:54 / 971人閱讀

摘要：說(shuō)明這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)中的定時(shí)器，和。簡(jiǎn)單說(shuō)，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開(kāi)執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會(huì)動(dòng)了。

說(shuō)明

這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器，setTimeout 和 setInterval。

效果圖

解釋

setTimeout()
setTimeout函數(shù)用來(lái)指定某個(gè)函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，以后可以用來(lái)取消這個(gè)定時(shí)器。

var timerId = setTimeout(func|code, delay)

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

setInterval()
setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個(gè)任務(wù)每隔一段時(shí)間就執(zhí)行一次，也就是無(wú)限次的定時(shí)執(zhí)行。

clearTimeout()，clearInterval()
setTimeout和setInterval函數(shù)，都返回一個(gè)表示計(jì)數(shù)器編號(hào)的整數(shù)值，將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對(duì)應(yīng)的定時(shí)器。

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

clearTimeout(id1);
clearInterval(id2);

注意：

setTimeout 和 setInterval 必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件，全部處理完以后，才會(huì)執(zhí)行setTimeout指定的任務(wù)。

這里就不細(xì)說(shuō) setTimeout 和 setInterval的概念了，
想詳細(xì)了解的請(qǐng)看這里，定時(shí)器

我們繼續(xù)說(shuō)實(shí)現(xiàn)雪花飄落的效果
主要是以下4步：
1、定義一片雪花模板；
2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間生成一片雪花；
3、設(shè)置第二個(gè)定時(shí)器，一次性定時(shí)器，當(dāng)?shù)谝粋€(gè)定時(shí)器生成雪花，并在頁(yè)面上渲染出來(lái)后，修改雪花的樣式，讓雪花動(dòng)起來(lái)；
4、設(shè)置第三個(gè)定時(shí)器，當(dāng)雪花落下后，刪除雪花。

上面是實(shí)現(xiàn)的思路，下面寫出具體的代碼，下面的代碼是JS原生代碼，最后會(huì)附上JQuery實(shí)現(xiàn)的代碼，思路都一樣。

注意：
因?yàn)槎〞r(shí)器添加的事件，會(huì)在下一次Event Loop執(zhí)行，所以第二個(gè)定時(shí)器的作用是為了讓生成的雪花先拼接到頁(yè)面中渲染出來(lái)后，再修改他的樣式，這樣才能讓他動(dòng)起來(lái)，如果沒(méi)有這個(gè)定時(shí)器，瀏覽器會(huì)把所有的JS代碼都執(zhí)行完之后才渲染頁(yè)面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒(méi)法動(dòng)了，這和瀏覽器的線程有關(guān)系。

簡(jiǎn)單說(shuō)，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開(kāi)執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會(huì)動(dòng)了。

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

總結(jié)

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

JQuery版