本文目录一览：
- 1、JS网页播放器的进度条究竟怎么做 高分求原理及代码 100分
- 2、js加载图片进度条应该怎么写
- 3、JS做的进度条，如何做的？
- 4、使用jquery.form.js实现文件上传及进度条前端代码
- 5、js怎么能让进度条动起来一点点减少
- 6、js怎么实现进度条！
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元素？
另外查找资料的时候发现了这篇文章
可以作为参考
以上
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做的进度条，如何做的？
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
类似这样的，就可以实现了进度的动态改变。
使用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)]
更多用法可以 参考官网
js怎么能让进度条动起来一点点减少
pre t="code" l="js"s[0].style.width = 100 - r / i * 100 + quot;%quot;;该代码不就是设置进度条的么
如果你能更改页面 你在标签中这样写：pre t="code" l="html"lt;h5gt;(资料完整度lt;span id=quot;wz_jdquot;gt;lt;/spangt;)lt;/h5gt;然后在你的JS中 pre t="code" l="js"s[0].style.width = 100 - r / i * 100 + quot;%quot;;的下面 写上:
pre t="code" l="js"document.getElementById(quot;wz_jdquot;).innerHTML = 100 - r / i * 100 + quot;%quot;;不就OK了么
注意:你的JS中哪儿有那行代码 就在那行下面 追加
如果不能更改页面就在那行代码下面 这样写：pre t="code" l="js"document.getElementsByTagName(quot;h5quot;)[0].innerHTML = quot;(资料完整度quot;+ (100 - r / i * 100) + quot;%)quot;;里面的0 表示是第1个h5标签 如果你有多个 自己进行更改
js怎么实现进度条！
!DOCTYPE "
html xmlns=""
head
title进度条/title
style type="text/css"
body{
text-align:center;
}
.graph{
width:450px;
border:1px solid #F8B3D0;
height:25px;
}
#bar{
display:block;
background:#FFE7F4;
float:left;
height:100%;
text-align:center;
}
#barNum{
position:absolute;
}
/style
script type="text/javascript"
function $(obj){ //封装方法，相当于jQuery
return document.getElementById(obj);
}
function go(){
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%";
$("bar").innerHTML = $("bar").style.width;
if($("bar").style.width == "100%"){
window.clearInterval(bar); //进度为100时清除定时器
}
}
var bar = window.setInterval("go()",50); //设置定时器
window.onload = function(){
bar;
}
/script
/head
body
div class="graph"
strong id="bar" style="width:1%;"/strong
/div
/body
/html
