Прогресс бар на яваскрипт

Программирование, которое не связано с API и Flash.

Прогресс бар на яваскрипт

Сообщение GORDIY » 14 ноя 2013, 22:49

Ну правда ПОМОГИТЕ ето громко сказано так как в яваскрипт я почти ноль... но всеже прошу помочь

собственно такая задача: делаю приложение для сайта вконтакте, есть скрипт который в цикле отсилает пользователям записи на стену.. Тоесть пользователь пишет сообщение и выбирает энное количество друзей, ну допустим 28, дальше скрипт по очереди отсылает сообщения каждому из етих 28ми.

Нужно вывести прогрес бар который визуально будет показывать сколько процентов записей отправленно на данный момент..

итак имеется переменная all которая содержит количество выбранных друзей (в данном примере 28) и переменная i которяя увеличивается при каждой отправке (итерации если не ошибаюсь) на единицу i++ КОГДА all = i ЦИКЛ ЗАВЕРШИТСЯ и вылетит сообщение ...


нашол пример
  1. <html>
  2. <head>
  3.     <title>Скрипт</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript">
  6.  
  7. function createTable(){
  8.     // создание таблицы
  9.     var table = document.createElement("table");
  10.     table.setAttribute("id", "the_table");
  11.     table.setAttribute("bgcolor", "#FFFFFF");
  12.     table.setAttribute("border", "1");
  13.     table.setAttribute("cellpadding", "0");
  14.     table.setAttribute("cellspacing", "0");
  15.  
  16.     // инициализация счетчика
  17.     var count = 0;
  18.  
  19.     // показываем прогресс бар
  20.     var bar = document.getElementById("bar");
  21.     var progress_panel = document.getElementById("progress")
  22.     progress_panel.style.display = "block";
  23.  
  24.     (function () {
  25.         var row = createRow(count);
  26.         table.appendChild(row);
  27.         if (count == 400) {
  28.             // Таблица создана, добавляем её в документ
  29.             var body = document.getElementsByTagName('body')[0];
  30.             body.appendChild(table);
  31.             // после добавления таблицы, прогресс бар можно спрятать
  32.             progress_panel.style.display = 'none';
  33.         } else {
  34.             // увеличиваем на 1 счетчик и изменяем прогресс бар
  35.             bar.style.width = ++count + "px";
  36.             // следующая итерация цикла
  37.             setTimeout(arguments.callee, 0);
  38.         }
  39.     })();
  40.  
  41. }
  42.  
  43. function createRow(count){
  44.     var row = document.createElement("tr");
  45.     row.className = "the_row";
  46.     row.setAttribute("id", "row_number_"+count);
  47.  
  48.     for (var i=0; i<10; i++){
  49.         var cell = document.createElement("td");
  50.         cell.setAttribute("width", "10%");
  51.         cell.setAttribute("bgcolor", "#EEEEEE");
  52.         cell.setAttribute("align", "left");
  53.         cell.setAttribute("style", "font-size:10px;color:#333");
  54.         cell.className = "the_cell";
  55.         cell.setAttribute("id", "the_cell_"+count+"_"+i);
  56.         cell.appendChild(document.createTextNode("Строка: "+count+" Ячейка: "+i));
  57.         row.appendChild(cell);
  58.     }
  59.  
  60.     return row;
  61. }
  62.  
  63. window.onload = createTable;
  64.  
  65. </script>
  66. </head>
  67. <body>
  68. <div id="progress" style="display:none">
  69.     Выполняется создание таблицы:
  70.     <div style="width:400px;border:1px solid #000">
  71.         <div id="bar" style="background:#00f;height:10px;width:0px"></div>
  72.     </div>
  73. </div>
  74. </body>
  75. </html>


создает таблицу на 400 строк, но в данном случае конечное число известно, а в моем оно зависит от количества выбраных друзей....

думаю что нужно както вот ети (28) сначала перевести в проценты и потом уже вычислять

но так как в яваскрипт я чайник как ето зделать непредставляю, поетому если кому не сложно помогите пожалуйста, набросайте какойто пример плиииз...

вообще не представляю что делать :(
GORDIY

 
Автор темы
Сообщения: 28
Зарегистрирован: 05 окт 2013, 19:11
Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Помогите зделать прогрес бар на яваскрипт

Сообщение sasha^ » 14 ноя 2013, 23:07

учи js. не думаю что кому-то интересно писать за другого готовый код.. ну и тему бы поместил в раздел: просим готовое и бесплатно...
да и ошибки в словах вроде "зделать" указывают на "далекость" человека...
вряд-ли интересно помогать человеку, который всегда ноет, что не знает js и типа помогите мне сделать потому-что не знаю.... ответ - учи и делай!
ну я сказал свое :)
sasha^

 
Сообщения: 711
Зарегистрирован: 10 сен 2012, 16:52
Благодарил (а): 1 раз.
Поблагодарили: 136 раз.

Re: Помогите зделать прогрес бар на яваскрипт

Сообщение GORDIY » 14 ноя 2013, 23:18

sasha^ писал(а):учи js. не думаю что кому-то интересно писать за другого готовый код.. ну и тему бы поместил в раздел: просим готовое и бесплатно...
да и ошибки в словах вроде "зделать" указывают на "далекость" человека...
вряд-ли интересно помогать человеку, который всегда ноет, что не знает js и типа помогите мне сделать потому-что не знаю.... ответ - учи и делай!
ну я сказал свое

полностью согласен, но не нашол ниодного примера, в нете полно прогрес баров но они все неподходят, там используется куча плагинов и какието громоздкие коды, а мне нужен простенький яваскрипт. Ошибки в словах указывают на незнание вашего языка))
Натолкните хоть на мысль(алгоритм действий) что за чем делать, а уже как я попробую разобраться сам.. :roll
GORDIY

 
Автор темы
Сообщения: 28
Зарегистрирован: 05 окт 2013, 19:11
Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Re: Помогите зделать прогрес бар на яваскрипт

Сообщение sasha^ » 15 ноя 2013, 15:11

Ошибки в словах указывают на незнание вашего языка))
ошибки указывают на незнание русского языка :)
полностью согласен, но не нашол ниодного примера, в нете полно прогрес баров но они все неподходят, там используется куча плагинов и какието громоздкие коды, а мне нужен простенький яваскрипт.
а ты думал найти все готовое, да еще и в уроке?... подумай и доделай...
Натолкните хоть на мысль(алгоритм действий) что за чем делать, а уже как я попробую разобраться сам.. :roll
ну здесь же совершенно все ясно... проценты и пр. ты и сам отсчитаешь, значит нужен прогресс бар, который показывает % и все.. :)
sasha^

 
Сообщения: 711
Зарегистрирован: 10 сен 2012, 16:52
Благодарил (а): 1 раз.
Поблагодарили: 136 раз.

Re: Прогресс бар на яваскрипт

Сообщение Александр » 15 ноя 2013, 16:04

sasha^ писал(а):да и ошибки в словах вроде "зделать"

Украинцы... Очень часто пишут именно так с ошибкой.

GORDIY писал(а):Натолкните хоть на мысль(алгоритм действий)

  1. document.getElementById('progressbar').innerHTML = (Math.ceil(100*count/total)) + '%';

total - всего действий
count - уже сделано действий, увеличивать после каждого сделанного действия и обновлять блок #progressbar.

За это сообщение автора Александр поблагодарил:
GORDIY
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Прогресс бар на яваскрипт

Сообщение GORDIY » 17 ноя 2013, 17:15

Александр писал(а):document.getElementById('progressbar').innerHTML = (Math.ceil(100*count/total)) + '%';

Благодарю все получилось :)
Александр писал(а):Украинцы... Очень часто пишут именно так с ошибкой.

Да, так оно и есть, :twisted: интересное наблюдение Однако :mrgreen:
GORDIY

 
Автор темы
Сообщения: 28
Зарегистрирован: 05 окт 2013, 19:11
Благодарил (а): 5 раз.
Поблагодарили: 0 раз.

Re: Прогресс бар на яваскрипт

Сообщение GORDIY » 18 ноя 2013, 14:15

А подскажите еще пожалуйста возможно ли както в приведенном в теме примере зделать кнопку паузы чтоб при нажатии цыкл останавливался но при нажатии другой кнопки мог продолжить с того самого места где остановился?
GORDIY

 
Автор темы
Сообщения: 28
Зарегистрирован: 05 окт 2013, 19:11
Благодарил (а): 5 раз.
Поблагодарили: 0 раз.


Вернуться в Программирование на PHP и других языках (без использования API)



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron