如何模仿下载速度与酒吧

How to similate download speed with bar?

本文关键字：酒吧 下载速度 何模仿      更新时间：2023-09-26

如何用一个工具条模拟下载速度?

示例用条形图显示在1mbyte/s的连接下下载5mb所需的时间。

我用CSS和HTML做了一个bar来模拟40%:http://jsfiddle.net/JxfAk/3/

我Jquery: 

$(document).ready(function() {
var Download = 1048576
var Data = 1048576 * 5

});
HTML: 

<div id="barboks"><div id="bar"></div></div>
CSS: 

#barboks {width:200px;height:40px;border:1px solid #CCCCCC;}
#bar {width:50px;height:40px;background:blue;display:block;}

我只是不知道我应该如何将条的宽度作为数据的下载速度。

演示:http://jsfiddle.net/Kt6Bc/2/

HTML——

<div id="container">
    <div id="bar"></div>
</div>
CSS——

#container {
    position : relative;
    width    : 500px;
    height   : 25px;
    border   : 1px solid #000;
    overflow : hidden;
}
#bar {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 0;
    height     : 25px;
    background : red;
}

JS——

var ani_running = false;
$('#container').on('click', function () {
    if (ani_running == false) {
        ani_running = true;
        $('#bar').animate({ width : '500px' }, 5000, function () {
            $('#bar').animate({ width : '0px' }, 1000);
            ani_running = false;
        });
    }
});

这将在另一个div中设置一个div，并使内部div的宽度看起来像一个加载条。由于父div的宽度是500px，我们可以通过5sec来模拟1MB/s来动画内部div的宽度。

相关文章：