Ⅰ 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
可以作為參考
以上
Ⅱ 用javascript寫的進度條，怎麼獲取進度條的值，按百分比顯示出來
s[0].style.width=100-r/i*100+"%";
該代碼不就抄是設置進度條的么襲
如果你能更改頁面 你在標簽中這樣寫：
<h5>(資料完整度<spanid="wz_jd"></span>)</h5>
然後在你的JS中
s[0].style.width=100-r/i*100+"%";
的下面 寫上:
document.getElementById("wz_jd").innerHTML=100-r/i*100+"%";不就OK了么
注意:你的JS中哪兒有那行代碼 就在那行下面 追加
如果不能更改頁面就在那行代碼下面 這樣寫：
document.getElementsByTagName("h5")[0].innerHTML="(資料完整度"+(100-r/i*100)+"%)";裡面的0 表示是第1個h5標簽 如果你有多個 自己進行更改
Ⅲ js載入flash顯示進度條
很奇怪嗎？我覺得很正常啊
Ⅳ 用js如何製作一個進度條用來改變背景圖片的透明度
<inputtype="range">
<divstyle="height:20px;background:red"></div>
<script>
document.querySelector("input").onchange=()=>{
document.querySelector("div").style.opacity=document.querySelector("input").value/100
}
</script>
Ⅳ 使用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裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網