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/n/183571.html

js进度步骤实例代码（js做进度条）

本文目录一览：

JS做的进度条，如何做的？

js代码执行绑定进度条

js加载图片进度条应该怎么写

JS程序 图片（即进度条）加载

使用jquery.form.js实现文件上传及进度条前端代码

JS网页播放器的进度条究竟怎么做 高分求原理及代码 100分

相关推荐

发表回复

JS程序图片（即进度条）加载

JS网页播放器的进度条究竟怎么做高分求原理及代码 100分