Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Прогресс бар на JavaScript
Исходный код этого примера:
<script type="text/javascript">
function createTable(){
// создание таблицы
var table = document.createElement("table");
table.setAttribute("id", "the_table");
table.setAttribute("bgcolor", "#FFFFFF");
table.setAttribute("border", "1");
table.setAttribute("cellpadding", "0");
table.setAttribute("cellspacing", "0");
// инициализация счетчика
var count = 0;
// показываем прогресс бар
var bar = document.getElementById("bar");
var progress_panel = document.getElementById("progress");
progress_panel.style.display = "block";
(function () {
var row = createRow(count);
table.appendChild(row);
if (count == 400) {
// Таблица создана, добавляем её в документ
var body = document.getElementsByTagName('body')[0];
body.appendChild(table);
// после добавления таблицы, прогресс бар можно спрятать
progress_panel.style.display = 'none';
} else {
// увеличиваем на 1 счетчик и изменяем прогресс бар
bar.style.width = ++count + "px";
// следующая итерация цикла
setTimeout(arguments.callee, 0);
}
})();
}
function createRow(count){
var row = document.createElement("tr");
row.className = "the_row";
row.setAttribute("id", "row_number_"+count);
for (var i=0; i<10; i++){
var cell = document.createElement("td");
cell.setAttribute("width", "10%");
cell.setAttribute("bgcolor", "#EEEEEE");
cell.setAttribute("align", "left");
cell.setAttribute("style", "font-size:10px;color:#333");
cell.className = "the_cell";
cell.setAttribute("id", "the_cell_"+count+"_"+i);
cell.appendChild(document.createTextNode("Строка: "+count+" Ячейка: "+i));
row.appendChild(cell);
}
return row;
}
window.onload = createTable;
</script>
<div id="progress" style="display:none">
Выполняется создание таблицы:
<div style="width:400px;border:1px solid #000">
<div id="bar" style="background:#00f;height:10px;width:0px">
</div>
</div>
</div>
.
Прокомментировать/Отблагодарить