當前位置:首頁 » 網站資訊 » 網站設計進度條怎麼寫

網站設計進度條怎麼寫

發布時間: 2022-09-28 04:01:05

㈠ flash網站載入太慢,如何加進度條

先用flash做一個載入界面,這個界面只包含載入背景和載入進度條,內容體積將後很小,發布後是一個swf。靜態頁面就先載入這個swf(因為小所以載入快),這個swf里寫的是載入你網站的swf,這樣子,載入進度什麼的都有了,而且用戶體驗也不至於一直盯著白屏。對了,載入swf用Loader,載入進度需要派發ProgressEvent.PROGRESS事件。

㈡ 全flash網站製作(loading)進度條動畫製作,網頁影片控制方法)

全站flash做下來至少得好幾萬。你覺得一百字能說清楚嗎

㈢ 網頁跳轉的時候,在網頁上面的進度條是怎麼做的

這個可以用html5實現,也可以做成gif的圖片,你只需要設置為和你程序設置一樣的時間然後進度條自動結束就好了。用圖片是最好實現,用ps軟體就可以製作
或者flash軟體做

㈣ js高手處理網站每頁載入時顯示進度條

這個很難實現的,因為要想實現准確的進度條,就必須知道要下載的總位元組數和當前已下載的位元組數,總位元組數除了html文件本身,還有裡面的各種對象如圖片、動畫、css文件、js文件等的位元組數,還要區分哪些是從電腦的cache取出的,哪些是從伺服器下載的,有些數據要等到頁面完全下載完畢才能得到,這馬後炮有什麼用呢。IE瀏覽器本身的進度條都無法做到准確呢,何況用JS?
一般都是用個動態GIF圖片或Falsh循環滾動一下糊弄糊弄用戶就行了。我還沒見過能精確計算出載入進度的網站,如果有,那我只能說他們糊弄的技術很牛B

㈤ 進度條裡面加上剩餘時間代碼怎麼寫

詳細的可以看一下下面推薦的網址~~有圖例~~解說更明確

Loading 預載動畫程序設計

Loading網頁預載程序是網頁動畫中的一個關鍵,因為即便是Flash生成的文件很小,但是製作出的大型動畫對於使用數據機的用戶速度還是需要解決的。如果沒有一個預載的過程,只怕動畫觀看起來也不會很流暢。特別是在動畫中加入了大量的聲音和圖像的動畫沒有了Loading將不會流暢的展現在我們眼前。
在此之前先學習一下在這章將要出現的屬性與函數。如果由於例中使用了沒有接觸過的函數和屬性,請先照例製作,等在以後的章節中學習了相關的其它函數後回過頭來再看的話,就會完全明白例子中的作用。

◆ _framesloaded

_framesloaded是電影剪輯的屬性,用來獲取電影剪輯中的已經下載的幀數,當然大部的應用於電影剪輯的屬性都可以應用於整部動畫。此屬性只能用來獲取。
if(_root.mc._framesloaded>100){
_root.gotoandplay(1)
}
此例子在普通模式下輸入將成為:
if(getproperty("_root.mc",_framesloaded)>100){
gotoandplay(1)
}
普通模式中對屬性的獲取將使用getproperty函數,但此函數在新的.語法的使用中並非最佳,在以下的例子中將不再引用。此例中以獲得電影剪輯已經下載的幀數大於100時,開始返回場景重新播放。這也是在網站製作中一個比較典型的例子,很多的電影剪輯因為體積問題,在「流」式播放過程中不會很流暢。而下例將是一個錯誤的例子。
_root.mc._framesloaded=100;
_root.gotoandplay(1);
在編程中將不允許對_framesloaded屬性進行賦值,如果你想當下載的幀數等於100時根目錄開始回放的話,請按下例製作。
if(_root.mc._framesloaded=100){
_root.gotoandplay(1);
}
◆ _totalframes

_totalframes屬性是用來獲取電影剪輯實體的總幀數。也可以用來獲取動畫的總幀數。在下例中會看到它的用法。
i=_root.mc._totalframes;
if(_root.cuttentframes=i);
_root.stop();
}
程序中將電影剪輯實體的總幀數賦值賦予了變數i,而當主場景的動畫播放指針播放到與電影剪輯中的總幀數相同的數目時,動畫停止播放。此屬性同樣為非賦值屬性。

◆ ifFramesloaded

ifFramesloaded函數也是用來獲取已經下載的幀數的,與_framesloaded不同的是它用於一個簡單的行為來描述已下載的幀數。而且此函數似乎是專為Loading設計,它位於Basic Actions指令集,指令名稱為If Frames Is Loaded。以下實例將構成一個最為簡單的Loading。
ifFrameLoaded(_totalframes){
gotoandplay(3);
}else{
gotoandplay(1);
}
將此程序加於影片的第二幀,可用於所有動畫的預載技術。意思為當裝入的幀數為總幀數時開始播放第三幀,如果不然,播放第一幀。在Flash5以後開始使用更多的函數和屬性,所以此函數不推薦使用。

◆ getBytesLoaded()

getBytesLoaded()為獲取電影剪輯實體的已下載位元組數,如果是外部動畫將返回動畫的總位元組數。GetBytesLoaded用於更加精確的Loading設計,因為它並不像_framesloaded屬性是獲取影片的總幀數,而是以位元組做為單位獲取。如果說動畫的最後一幀將是一個大型的圖像或是聲音角色的話,哪么_framesloaded所獲得的百分比將不準確,getBytesLoaded有效的彌補了此方面的不足。例:
i=_root.getBytesTotal();
if(_root.getBytesLoaded()>=1000000){
n=_root.getBytesLoaded();
if(n<=i/4){
_root.stop();
trace("下載了1M,還不到四分之一,動畫太大,下載時間會很長,是否繼續?")
}
}
此句的意思為當動畫下載到1MB時,比較是否已經下載了動畫的四分之一,如果是,停止動畫的播放,在調試窗口顯示「下載了1M,..."等字元串,根據動畫中的其他行為判斷是否繼續播放。此例的另一特點是,停止的地方如果有插入電影剪輯的話,電影剪輯將不會停止播放。也可以通過動態文本顯示已經下載的文字數,假設在動畫的主場景中有一個變數名為text的動態文本變數,哪么例:
_root.text=_root.getBytesLoaded();
if(_root.getBytesLoaded()>=_root.getBytesTotal()){
gotoandplay(3);
}else{
gotoandplay(1);
}
動態文本框會動態顯示已經下載的位元組數為觀眾服務。觀眾也會了解在動畫的下載過程中動態的進度了。

◆ getBytesTotal()

getBytesTotal()函數是用來獲取動畫或是電影剪輯的總位元組數,當然我們可以通過對文件的大小來觀察動畫的總位元組數,但對於網路上使用瀏覽器的觀眾來說,動態顯示文件大小是很有必要的。還有,如果想觀察動畫中電影剪輯的體積就只有靠getBytesTotal()函數了。
If(_root.getBytesTotal()>=1000000){
_root.stop();
}
這個程序的意思是當動畫的總位元組超過1M時停止動畫播放。

◆ gettimer()

gettimer()函數用來獲取電影剪輯或是動畫的已經播放時間數,此函數並不僅僅應用於Loading的製作,在今後的學習過程中還會接觸到它。在Flash5的對動畫播放時間的控制上會有gettimer()函數大顯身手的舞台。但gettimer()函數獲取的時間是以毫秒做為計算單位的,一般在程序製作過程中還會對它除以一千來取得秒,這樣更加符合對於時間播放程序的顯示。假設動畫中有一個text的動態文本框變數。例:
text=gettimer()/1000;
通過幀循環或是其它的誅如OnClipEvent(enterframe)等行為的控制會動態的顯示動畫播放的時間過程。又例如:
text=gettimer()/1000;
if(text>=10){
gotoandstop(3);
}else{
gotoandplay(1);
}
假設此程序位於動畫的主場景的第二幀。那麼當開始播放10秒鍾之後才會正式開始播放,不然只會在第一幀與第二幀之間循環。

一個簡單的Loading

一個簡單的Loading製作並不需要很高深的編程基礎,而且大部份設計人員開始學習Flash腳本編程時都是從Loading開始學起的。也是因為製作Loading對於動畫傳播方面起著至關重要的作用。

步驟一、打開Flash5,新建一個文件。在影片的默認設置中背景色是白色的,動畫將以每秒十二幀的速度播放,這些你可以通過點擊Modify|Movie命令打開Movie Properties對話框觀察到。如圖4-1所示。但是實踐告訴我們,使用影片默認設置製作的動畫,在網上瀏覽時,並不能很流暢,所以設計人員一般喜歡把默認的每秒12幀更改的高一點,這樣就可以在發布了以後觀看到比較流暢的動畫了。

圖4-1 Movie Properties對話框

步驟二、在影片的第一幀,使用Window|Panels|Stroke命令打開Stroke筆觸面板,將筆觸的寬點拉桿拉到3,如圖4-2所示。

圖4-2 用Stroke面板改變筆觸粗細

步驟三、點擊繪圖面板中的方形繪圖工具。在繪圖面板Colors項上面的油漆桶工具中把色彩選為紅色。然後在場景中繪制出一個長方形,如圖4-3所示。

圖4-3 繪制一個長方形進度條

步驟四、在編輯區內用滑鼠點擊長方形的紅色處,你會發現色彩出現了很多小麻點,已經處於了被選取狀態。

步驟五、點擊Insert|Convert to Symbol,將紅色長方形轉換為符號,在隨後打開的Symbol Properties對話框中的Name輸入框輸入符號的名稱為Loading。然後選擇Movie Clip電影剪輯項,點擊OK。

步驟六、現在點擊紅色長方形你會發現它已經不再出現小麻點了,而是出現了一個藍色的外框,因為它已經是一個符號了。現在選Window|Panels|Instance命令打開Instance實例面板。

步驟七、在面板中的Name項中輸入名稱Loading,為這個符號取了一個分身名稱。如圖4-4所示。

圖4-4 為進度條符號取分身名稱

步驟八、在時間軸的第二幀按F6鍵,插入一個關鍵幀。

步驟九、用滑鼠雙擊此幀打開幀的Action面板。我們要開始製作預載動畫的程序了。

步驟十、雙擊Action面板左邊的指令里的Actions項,在打開的指令里選擇if,用滑鼠又擊,if指令出現在編輯區了。

步驟十一、在Action面板的下半部份參數輸入區里Condition輸入欄中輸入代碼_framesloaded>=_totalframes。如圖4-5所示。

圖4-5 在if指令參數框內輸入代碼

步驟十二、然後點擊指令區的Basic Actions命令集里的goto指令,在隨後的參數輸入框內的Frame欄目中輸入數字3。如圖4-6所示。

圖4-6 goto指令的參數輸入欄

步驟十三、然後點擊 Actions指令集中的else項。

步驟十四、再次點擊goto指令,這回不用更改幀序列數字了。

步驟十五、點擊Action指令集的Setproperty指令,選擇Properties下拉框中的_xscale屬性,然後在Target輸入欄中輸入「_root.loading",點選後面的Expression單選框項目。

步驟十六、在Value輸入欄中輸入代碼(_framesloaded/_totalframes)*100,點選後面的Expression單選框。

圖4-7 Setproper指令參數輸入框

步驟十七、指令已經輸入完畢了。接下來開始在第三幀後面製作你的動畫,然後發布,上傳,觀看。你也可以打開Control|Debug Movie測試電影,在隨後打開的瀏覽窗口中使用Debug菜單中的模擬下載速度來測試。

程序解讀:

第1-2行中if(_framesloaded>=_totalframes)句的意思是當已經下載的幀數大於等於影片的總幀數時,跳轉到第三幀開始播放。

第3-5行,如果下載的幀數小於總幀數的話,跳轉到第一幀播放。並且安裝分身名稱為loading的電影剪輯的長度屬性,使它的長度成為已經下載的幀數除以總幀數再乘100。

知識要點:

Loading製作很多設計人員喜歡使用幀行為,其實用很多的功能都可以實現Loading製作。本例中使用(_framesloaded/_totalframes)*100的表達式來製作進度條的寬度。其它Loading製作方法不管是用下載時間函數還是用下載位元組函數,但下載數除以總數乘以100的表達式基本上是沒什麼變化的了。

精確的Loading設計

上述的哪個Loading程序有一些比較簡單,雖然它已經達到了預載的效果,但是對於要求比較高的朋友可能就不能滿足了。哪么請看圖4-8,這個預載動畫將使用到比較多的函數,使動畫預載看起來更加的人性化。

圖4-8 高級的Loading程序界面

製作過程:

步驟一、打開剛才我們設計的Loading動畫。這個Loading程序將是在上述Loading的基礎上修改而成的。

步驟二、使用文字工具,並且使用Window|Panels|Character命令,打開Character字元面板,將字型大小設置為25,字色為黑色。如圖4-9所示。

圖4-9 Character面板的設置

步驟三、將文字按圖4-8這樣式輸入在界面里。然後打開Window|Panels|Align命令,打開Align對齊面板。

步驟四、使用其中的對齊方式將文字對齊成圖4-8之樣式。

步驟五、點擊文字工具,在總位元組的文字後面用滑鼠拖出一個文本框,注意用調節點調節文本框的寬度。然後打開Window|Panels|Text Options命令打開Text Options文本屬性面板,在下拉菜單中選擇Dynamic Text打開動態文本設置框。

步驟六、在動態文本框的Variable項輸入這個文本框的變數為zbye,如圖4-10所示。

圖4-10 動態文本面板中設置動態文本變數

步驟七、用同樣的方法在繪制七個動態文本框在各字元的後面。已經下載位元組後面的欄位變數為yby,總幀數的為zfrm,已下載幀數的是yfrm,需要的時間後面變數名為xtim,已用時間的為ytim,在進度條下方的下載進度變數為yload。

步驟八、設置完畢開始進行程序設計。打開第二幀的Action面板,你可以看到我們剛才設計的程序。在這個程序中有很多的內容無需改變,只要再添加一些程序就可以了。

步驟九、我們將Setproperty("_root.loading",_xscale,(_framesloaded/_totalframes)*100這句用滑鼠拖動上移一行,在指定區的Actions指令集中選擇Set Variable指令。

步驟十、在打開的變數輸入框中,Variable項填寫總幀數的欄位變數zby,在Value欄中輸入代碼_root.getbytestotal(),勾選後面的Expression單選框。

圖4-11 變數輸入框

步驟十一、用同樣的方法輸入其它變數。yby=_root.getbytesloaded()。
步驟十二、zfrm = _root._totalframes。
步驟十三、yfrm = _root._framesloaded。
步驟十四、ytim=gettime()/1000 + "秒"。
步驟十五、xtim = int(zby-yby)/yby*tim) + "秒"。
步驟十六、yload = _framesloaded/_totalframes*100。
步驟十七、整個程序輸入結束。對照參考圖4-12。

圖4-12 高級Loading的完整程序

程序解讀:

這前幾行程序基本上不用解讀,哪些都是Action中所擁有的函數,只要將本章開始時的函數學習好,把它們賦值給變數就可以了。

第十行,用了一個表達式來獲得了還需要的時間變數值。總位元組減去已經下載的位元組的值除以已下載的位元組再乘以已經使用的時間。

第十一行,用已經下載的幀數除以總幀數再乘以100得到下載進度,其實這行程序還可以變化為yfrm/zfrm*100。

知識要點:

高級Loading其實製作起來也並不復雜,你可以通過對函數的了解來做到。另外這里有一個概念,getbytesloaded和另外幾個函數都是Movie Clip的函數,為什麼也可以在場景中使用呢?其實你可以把場景看成是一個大的Movie Clip,很多電影剪輯的函數都可以使用在場景中,包括gettimer()。而動態文本變數正是去顯示這些函數的數值的,其實在Loading中還有一個概念,就是利用幀循環也可以達到循環效果,與一般的編程不同的是Flash可以使用幀循環去達到一些效果,有時候因為幀循環的時間特性,做出的循環比用while等循環語句構造出更加意想不到的效果。學習好這些函數正是高級Loading製作的關鍵。
參考資料: http://www.blueidea.com/tech/multimedia/2004/1711.asp

㈥ 我用易語言寫一個瀏覽器,想弄一個進度條顯示網頁載入進度,在未載入完之前,不能按下某個按鈕,怎麼實現

.版本 2

.子程序 _超文本瀏覽框1_載入進度改變
.參數 進度百分比, 整數型

按鈕1.標題 = 到文本 (進度百分比)
進度條1.位置 = 進度百分比
.判斷開始 (進度百分比 < 100)
按鈕1.禁止 = 真
.默認
按鈕1.禁止 = 假

源碼如上。創建一個超文本瀏覽框、一個進度條和一個按鈕,粘貼代碼至易語言,調試運行試試。

㈦ 如何用html5在網頁上設置進度條

首先,我們製作的這個進度條並沒有後台數據作為支撐,所以是一個靠js實現的一個簡單的頁面。

我們首先需要新建一個html5的頁面,其使用的progress元素實在html5時代才出現的。

我們在新建的頁面中,輸入一個段落標簽,一個進度條,一個button按鈕。

然後,我們需要設置一下進度條顯示的進度。value代表從多少開始,max代表到多少結束。我們做的是百分比形式的,應該寫成這樣的。

這些做好之後,我們需要書寫兩個小的事件,實現原理大體上是滑鼠單擊下載按鈕,開始下載變為正在下載百分之多少,等到達到我們預設的時間後顯示下載完成。

我們之前已經給p標簽和progress標簽分別賦予了不同的id,我們需要獲取到這兩個元素,並將他們賦給兩個變數。

我們還要將progress的初始值設為0,當滑鼠單擊的時候,我們以一定的時間為周期調用寫好的事件。

函數寫好之後,我們在瀏覽器中調試,點擊下載按鈕之後會在300ms內完成下載時間。

㈧ 網頁中的Load進度條怎麼做的,用dreamweaver製作的方法!

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="1" rowspan="2"></td>

<td width="1" height="1"></td>

<td height="1" bgcolor="#cccccc"></td>

<td width="1"></td>

<td width="1" rowspan="2"></td>

</tr>

<tr>

<td width="1" height="1" bgcolor="#cccccc"></td>

<td height="1"></td>

<td width="1" bgcolor="#cccccc"></td>

</tr>

<tr>

<td width="1" bgcolor="#cccccc"></td>

<td width="1" height="1"></td>

<td width="120 height="0"><marquee direction="right" scrollamount="10"><table style="font-size:1px;width:50px;height:10px;"><tr><td bgcolor="#e5fee5"></td><td bgcolor="#caf7ca"></td><td bgcolor="#8feb90"></td></tr></table></marquee></td>

<td width="1" height="1"></td>

<td width="1" bgcolor="#cccccc"></td>

</tr>

<tr>

<td rowspan="2"></td>

<td height="1" bgcolor="#cccccc"></td>

<td height="1"></td>

<td bgcolor="#cccccc"></td>

<td rowspan="2"></td>

</tr>

<tr>

<td height="1"></td>

<td height="1" bgcolor="#cccccc"></td>

<td></td>

</tr>

</table>
載入完成轉到主業

㈨ 網頁文字進度條怎麼做

FLASH可以做
進度條
,去http://www.
flash8
.net
進入源文件那選項,找帶有進度條的FLASH,把源文件下下來,裡面的進度拿出來用

㈩ JS網頁播放器的進度條究竟怎麼做 高分求原理及代碼 100分

你用的是wmp控制項的話,可以參考如下屬性:

controls.currentPosition
這個屬性可以用來控制當前歌曲播放的進度,可寫,比如設置
document.getElementById("wmpid").controls.currentPosition = 18
就是將當前歌曲進到18秒,我沒有試過非整數部分可不可以生效(應該是可以的)

controls.currentPositionString
這是個只讀屬性。比如當前歌曲在18秒出則值為00:18.

至於你說的進度條,控制起來是用event.clientX屬性,這是滑鼠相對於窗口的橫坐標。用這個數字減去那個進度條DIV的clientX屬性就是滑鼠在進度條上的位置。你自己可以作些加減微調確保結果適當。如果寬度100px,你點的位置是40px.那麼用40/100*歌曲長度就是當前應該跳轉到的位置了。

加入滑塊也很簡單,網上有很多drag類,加一個進去稍微調整一下就比較好了

順便也貼一下wmp組件的基本屬性吧,LZ如果沒有的話可以稍微參考一下
URL:String; 指定媒體位置,本機或網路地址
uiMode:String; 播放器界面模式,可為Full, Mini, None, Invisible
playState:integer; 播放狀態,1=停止,2=暫停,3=播放,6=正在緩沖,9=正在連接,10=准備就緒
enableContextMenu:Boolean; 啟用/禁用右鍵菜單
fullScreen:boolean; 是否全屏顯示
[controls] wmp.controls //播放器基本控制
controls.play; 播放
controls.pause; 暫停
controls.stop; 停止
controls.currentPosition:double; 當前進度
controls.currentPositionString:string; 當前進度,字元串格式。如「00:23」
controls.fastForward; 快進
controls.fastReverse; 快退
controls.next; 下一曲
controls.previous; 上一曲
[settings] wmp.settings //播放器基本設置
settings.volume:integer; 音量,0-100
settings.autoStart:Boolean; 是否自動播放
settings.mute:Boolean; 是否靜音
settings.playCount:integer; 播放次數
[currentMedia] wmp.currentMedia //當前媒體屬性
currentMedia.ration:double; 媒體總長度
currentMedia.rationString:string; 媒體總長度,字元串格式。如「03:24」
currentMedia.getItemInfo(const string); 獲取當前媒體信息"Title"=媒體標題,"Author"=藝術家,"Copyright"=版權信息,"Description"=媒體內容描述,"Duration"=持續時間(秒),"FileSize"=文件大小,"FileType"=文件類型,"sourceURL"=原始地址
currentMedia.setItemInfo(const string); 通過屬性名設置媒體信息
currentMedia.name:string; 同 currentMedia.getItemInfo("Title")
[currentPlaylist] wmp.currentPlaylist //當前播放列表屬性
currentPlaylist.count:integer; 當前播放列表所包含媒體數
currentPlaylist.Item[integer]; 獲取或設置指定項目媒體信息,其子屬性同wmp.currentMedia

播放器界面做的很不錯,請繼續努力

------
問題補充:

那麼 wmp在Firefox下如何控制?
-----
目前我所知道的firefox下同樣支持以上屬性。只是調用時候要這樣<object type="application/x-ms-wmp">,其他都相同。我用的是firefox3.6,安裝了wmp擴展控制項。沒有安裝的用戶可能不能正常瀏覽你的頁面。

另外在測試的時候發現直接在原來的object里添加type屬性不行,但是用一個新的object可以,原因未知。我想是不是不認clsid的問題。如果真是這樣,可能需要用程序判斷瀏覽器然後動態寫入相應的object元素?

另外查找資料的時候發現了這篇文章
http://www.jb51.net/article/24207.htm
可以作為參考

以上