js進度步驟實例代碼（js做進度條）

本文目錄一覽：

1、JS做的進度條，如何做的？
2、js代碼執行綁定進度條
3、js加載圖片進度條應該怎麼寫
4、JS程序圖片（即進度條）加載
5、使用jquery.form.js實現文件上傳及進度條前端代碼
6、JS網頁播放器的進度條究竟怎麼做高分求原理及代碼 100分

JS做的進度條，如何做的？

js其實是沒法計算到網頁的加載進度的。

目前見到的打開頁面顯示進度的有兩種

1、如果是flash做的，那是flash自身的加載進度。

2、如果是js做的，做法比較簡單，就是在頁面的不同的地方插入script標籤，動態改變進度的值。

html

head

script

var processPer = 0;

window.onload = function(){

document.getElementById(‘process’).innerHTML = processPer;

}

/script

/head

body

div id=”process”/div

div/div

….

script

processPer = 30;

document.getElementById(‘process’).innerHTML = processPer;

/script

div/div

….

div/div

….

script

processPer = 100;

document.getElementById(‘process’).innerHTML = processPer;

/script

/body

/html

類似這樣的，就可以實現了進度的動態改變。

js代碼執行綁定進度條

需要計算分析文件進度，轉成百分比，動態變更progress-bar的width

div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”

60%

/div

js加載圖片進度條應該怎麼寫

var jsload = {

img: [ ‘about.png’, ‘applyBtn.png’, ‘background2.png’, ‘bgImg.png’, ‘bird.cman.png’, ‘borad2.png’,

‘choujiang.png’,’entry.png’,’f_0.png’,’f_1.png’,’f_2.png’,’f_3.png’,

‘f_4.png’,’f_5.png’,’f_6.png’,’f_7.png’,’f_8.png’,’f_9.png’,

‘fxFBfont.png’,’ground.2.png’,’logo.png’,’pgBar.png’,’pgBg.png’,’pipe2.png’,

‘raffle.png’,’rank.png’,’rankBtn.png’,’ruleBtn.png’,’shareButton.png’,

‘shareImg.png’,’sureBtn.png’,’tap.png’,’titleImg.png’,’trymore.png’

count: 1,

go: 1,

init: function () {

var _this = this;

$.get(‘dom.txt’, function (response) {

$(‘#gameDiv’).append(response);

_this.move();

});

this.count += this.img.length;

this.go = this.count;

this.loadImg();

loadImg: function () {

for (var i = 0; i this.img.length; i++) {

var img = new Image();

var _this = this;

img.onload = function () {

_this.move();

};

img.src = ‘resource/assets/’ + this.img[i];

};

return this;

move: function () {

–this.go;

var press = Math.round((this.count – this.go) / this.count * 100);

console.log(‘遊戲加載進度’, press);

// if(press === 100){

// start.init();

// }

}

};

jsload.init();

圖片和txt加載可以參考下

JS程序圖片（即進度條）加載

ajax默認情況下是異步執行的（建議盡量異步），也就是說當發出ajax命令後，程序是不停頓的，如果這時候隱藏圖片，那麼就相當於沒有顯示了（瀏覽器可能來不及把圖片顯示出來就被你隱藏了）。所以，標準做法是在ajax的回調函數中進行圖片的隱藏（建議用complete事件），比如：

var loading=document.getElementById(“loading”);

loading.style.display=”block”; //盡量不要通過設為空白來顯示圖片，兼容性差

ajax({

//…其他參數略

success:…

fail:…

complete:function(){

loading.style.display=”none”; //在這裡隱藏！

}

});

使用jquery.form.js實現文件上傳及進度條前端代碼

ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這裡用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。

需要解釋下我的結構， #upload-input-file 的input標籤是真實的文件上傳按鈕，包裹form標籤後可以實現上傳功能， #upload-input-btn 的button標籤是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。

去掉hidden的class，看到的效果是這樣的

[圖片上傳失敗…(image-2c700a-1548557865446)]

將上傳事件綁定在file的input裡面，綁定方式就隨意了。

[圖片上傳失敗…(image-3d6ae0-1548557865446)]

[圖片上傳失敗…(image-9f0adf-1548557865446)]

更多用法可以參考官網

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.duration:double; 媒體總長度

currentMedia.durationString: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元素？

另外查找資料的時候發現了這篇文章

可以作為參考

以上

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/183571.html

js進度步驟實例代碼（js做進度條）

本文目錄一覽：

JS做的進度條，如何做的？

js代碼執行綁定進度條

js加載圖片進度條應該怎麼寫

JS程序 圖片（即進度條）加載

使用jquery.form.js實現文件上傳及進度條前端代碼

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

相關推薦

發表回復

JS程序圖片（即進度條）加載

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