現(xiàn)在流行的cms系統(tǒng)，比如dedecms，phpcms，帝國cms等這些開源的cms系統(tǒng)，在安裝時總會出現(xiàn)這樣一個這樣類似的界面，提示我們安裝的進度，安裝到哪一步，認(rèn)為系統(tǒng)是在這個頁面執(zhí)行的安裝，給人感覺安裝的特別流暢。其實呢，這和后臺安裝沒有任何關(guān)系，只是一個單純的JS動畫而已。
接下來，我們看一下這個安裝進度的源碼
首先，這一段html代碼就是要在這實現(xiàn)動畫的地方，也就是js動態(tài)追加元素的地方
這一部分代碼已經(jīng)被我處理過了，就是將var log這個變量處理過而已，改變量保存的js動態(tài)追進html標(biāo)記里面顯示的文本，其實這也不是重點，其實這個動畫最主要的實現(xiàn)原理就是這句
document.getElementById('log').scrollTop = document.getElementById('log').scrollHeight;將元素的滾動高度賦值給滾動條與瀏覽器之間的距離，沒有這句話，滾動條只會變短不會下拉，
接下來就是簡單的js定時器了，每100毫秒執(zhí)行一遍函數(shù)拆分要輸出的字符串動態(tài)的去追加元素并且讓滾動條逐漸下拉，視覺上給人帶來是這個頁面正在安裝，其實這個頁面就算不要，上一個頁面也已經(jīng)都安裝完畢了，這就是cms安裝進度的原理。
關(guān)鍵詞:
