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