現(xiàn)在流行的cms系統(tǒng)，比如dedecms，phpcms，帝國(guó)cms等這些開源的cms系統(tǒng)，在安裝時(shí)總會(huì)出現(xiàn)這樣一個(gè)這樣類似的界面，提示我們安裝的進(jìn)度，安裝到哪一步，認(rèn)為系統(tǒng)是在這個(gè)頁(yè)面執(zhí)行的安裝，給人感覺(jué)安裝的特別流暢。其實(shí)呢，這和后臺(tái)安裝沒(méi)有任何關(guān)系，只是一個(gè)單純的JS動(dòng)畫而已。

   接下來(lái)，我們看一下這個(gè)安裝進(jìn)度的源碼

   首先，這一段html代碼就是要在這實(shí)現(xiàn)動(dòng)畫的地方，也就是js動(dòng)態(tài)追加元素的地方

這一部分代碼已經(jīng)被我處理過(guò)了，就是將var log這個(gè)變量處理過(guò)而已，改變量保存的js動(dòng)態(tài)追進(jìn)html標(biāo)記里面顯示的文本，其實(shí)這也不是重點(diǎn)，其實(shí)這個(gè)動(dòng)畫最主要的實(shí)現(xiàn)原理就是這句

document.getElementById('log').scrollTop = document.getElementById('log').scrollHeight;將元素的滾動(dòng)高度賦值給滾動(dòng)條與瀏覽器之間的距離，沒(méi)有這句話，滾動(dòng)條只會(huì)變短不會(huì)下拉，

接下來(lái)就是簡(jiǎn)單的js定時(shí)器了，每100毫秒執(zhí)行一遍函數(shù)拆分要輸出的字符串動(dòng)態(tài)的去追加元素并且讓滾動(dòng)條逐漸下拉，視覺(jué)上給人帶來(lái)是這個(gè)頁(yè)面正在安裝，其實(shí)這個(gè)頁(yè)面就算不要，上一個(gè)頁(yè)面也已經(jīng)都安裝完畢了，這就是cms安裝進(jìn)度的原理。