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

2021-08-17 07:11:58 字數 2403 閱讀 7673

settimeout函式用來指定某個函式或某段**,在多少毫秒之後執行。它返回乙個整數,表示定時器的編號,以後可以用來取消這個定時器。

var timerid = settimeout(func|code, delay)

setinterval函式的用法與settimeout完全一致,區別僅僅在於setinterval指定某個任務每隔一段時間就執行一次,也就是無限次的定時執行。

settimeout和setinterval函式,都返回乙個表示計數器編號的整數值,將該整數傳入cleartimeout和clearinterval函式,就可以取消對應的定時器。

var id1 = settimeout(f,1000);

var id2 = setinterval(f,1000);

cleartimeout(id1);

clearinterval(id2);

1、定義一片雪花模板; 

2、設定第乙個定時器,週期性定時器,每隔一段時間生成一片雪花; 

3、設定第二個定時器,一次性定時器,當第乙個定時器生成雪花,並在頁面上渲染出來後,修改雪花的樣式,讓雪花動起來; 

4、設定第三個定時器,當雪花落下後,刪除雪花。

lang="en">

charset="utf-8">

name="viewport"

content="width=device-width, initial-scale=1.0">

body

style>

head>

function

snow

() px;

opacity: $;

font-size:$px;

top:-25px;

transition:$ms;

`;//拼接到頁面中

//設定第二個定時器,一次性定時器,

//當第乙個定時器生成雪花,並在頁面上渲染出來後,修改雪花的樣式,讓雪花動起來;

settimeout(function

() px;

top:$px;

opacity:$;

`;//4、設定第三個定時器,當雪花落下後,刪除雪花。

settimeout(function

() , durationtime);

}, 0);

}, millisec);

}snow();

script>

body>

html>

因為定時器新增的事件,會在下一次event loop執行,所以第二個定時器的作用是為了讓生成的雪花先拼接到頁面中渲染出來後,再修改他的樣式,這樣才能讓他動起來,如果沒有這個定時器,瀏覽器會把所有的js**都執行完之後才渲染頁面,這樣的話後面的樣式就直接覆蓋前面的樣式了,雪花就沒法動了,這和瀏覽器的執行緒有關係。

原來 css 與 js 是這樣阻塞 dom 解析和渲染的

哪些地方會出現css阻塞,哪些地方會出現js阻塞?

瀏覽器~載入,解析,渲染

不明白為什麼用第二個定時器看這幾篇文章 

js settimeout()

原來 css 與 js 是這樣阻塞 dom 解析和渲染的

哪些地方會出現css阻塞,哪些地方會出現js阻塞?

瀏覽器~載入,解析,渲染

lang="en">

charset="utf-8">

name="viewport"

content="width=device-width, initial-scale=1.0">

body

style>

head>

src="">

script>

function

snow

() ).html("❄");

//獲取頁面的寬度,利用這個數來算出,雪花開始時left的值

var documentwidth = $(document).width();

//獲取頁面的高度 相當於雪花下落結束時y軸的位置

var documenthieght = $(document).height();

//定義生成一片雪花的毫秒數

var millisec = 100;

//2、設定第乙個定時器,週期性定時器,每隔一段時間(millisec)生成一片雪花;

setinterval(function

() ).animate(, durationtime, function

() );

}, millisec);

};snow();

script>

body>

html>

FormatMessage簡單說明

常用引數簡介.formatmessage format message from system format message allocate buffer,null,lval,null,lptstr hlocal,0,null 第乙個引數是標誌,告訴這個formatmessage函式,我想要的特點...

Subversion 簡單說明

subversion 簡單說明 checkout 從源 管理伺服器取出 commit 提交更新的 到源 管理伺服器。update 從源 管理伺服器獲取 的最新更新。export 從源 管理伺服器匯出 匯出的 將脫離源 管理。revert 將當前資料恢復到最近與伺服器同步的版本,即放棄自己的所有未提交...

簡單說說MPEG

mpeg 1 mpeg 2和mpeg 4。mpeg 3 原本目標是為高畫質晰度電視 hdtv 設計,隨後發現mpeg 2已足夠hdtv應用,故mpeg 3的研發便中止。音訊物件 video audio objects 的編碼 3d內容 低位元率編碼 low bitrate encoding 和數字版...