Прогрессбар

@andr-xw · Регистрация: 05.03.2013

Студворк — интернет-сервис помощи студентам

В общем, нужен прогрессбар.
Он должен отображать текущий процесс выполнение другого яваскрипта.
В инете нашел следующий, он мне более-менее понятен и я думаю, что смогу адаптировать его к своим нуждам.
Но там приведен только код самого скрипта, и, как я понял, нужна хтмл оберточка, которая и будет отображаться в виде прогрессбара. По сути несколько дивов с правильно расставленными id. Но сам я их проставить не могу.
Может кто помочь с этим?

Собственно, код скрипта:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
function Load_run() {
 
    var body = document.getElementsByTagName('body')[0];
    var divC = document.createElement('div');
    var divR = document.createElement('div');
    var divRC = document.createElement('div');
    var pText = document.createElement('p');
    var prNum = 0;
    divC.appendChild(divR);
    divC.appendChild(divRC);
    divC.appendChild(pText);
    pText.innerHTML = "...";
    body.appendChild(divC);
 
    var a=setInterval (function() {
 
    divRC.style.backgroundColor='#F08080';
    prNum+=6;
    pText.innerHTML = "Идет загрузка: "+prNum+" %";
    divRC.style.width = prNum+"px";
 
        if (prNum >= 100 ) {
            pText.innerHTML = "Загрузка завершена";
            divRC.style.width = 100+"px";
            clearInterval(a);
        }
    },500);
 
 
    divC.style.border = 'dotted';
    divC.style.backgroundColor = "#F5F5F5";
    divC.style.borderColor = '#E6E6FA';
    divC.style.position = 'absolute';
    divC.style.width = 320;
    divC.style.height = 75;
    divC.style.marginTop = 20;
 
    divR.style.borderRadius = 5;
    divR.style.width = 99;
    divR.style.height = 10;
    divR.style.backgroundColor = '#FFF0F5';
    divR.style.borderRadius = 5;
    divR.style.border = "groove";
    divR.style.marginTop = 20;
    divR.style.position = 'fixed';
    divR.style.marginLeft = 20;
 
    divRC.style.borderRadius = 4;
    divRC.style.zIndex = 999;
    divRC.style.marginTop = 23;
    divRC.style.marginLeft = 22;
    divRC.style.height = 10;
    divRC.style.position = 'relative';
 
    pText.style.marginTop  = -13;
    pText.style.marginLeft = 140;
    pText.style.fontSize = 14+"px";
    pText.style.fontFamily = "sans-serif";
    pText.style.fontWeight = "bolder";
    pText.style.textAlign = 'center';
 
}
 
Load_run();

Взято с сайта:
http://codomaza.com/script/pro... javascript

Добавлено через 4 часа 46 минут
Ап. Ребят, срочно надо.

@newJS · 16.04.2013, 07:23

Пока это не сделают в html5 толку не будет, по простому это нельзя, сам JS не позволяет, есть один сложный вариант, но ссылку модеры убьют, и шансов прикрутить тот код мало, он больше демо чем рабочий скрипт, хочешь ссылку пиши в личку.

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

@and_y87 · 16.04.2013, 09:35

andr-xw, Этот скрипт сам создаёт все теги:

JavaScript
1
2
3
4
5
var divC = document.createElement('div');
    var divR = document.createElement('div'); // ползунок
    var divRC = document.createElement('div'); // ползунок
    var pText = document.createElement('p'); // текст
    var prNum = 0;

@andr-xw · 16.04.2013, 12:09 **[ТС]**

Да, действительно отрисовал нечто похожее где-то внизу, поэтому сразу его не заметил.
Ток прогрессбара там никакого нет, только слова "идет загрузка" и процентики.

Только "сам создаёт" и "где-нибудь там" меня не устраивает, можно эти его создаваемые тэги заменить на статичный html-код с display:none? Но принцип работы оставить тем же?

@and_y87 · 16.04.2013, 12:12

andr-xw, возможно всё...
думается мне

JavaScript
1
divRC.style.position = 'relative';

надо заменить на

JavaScript
1
divRC.style.position = 'absolute';

@andr-xw · 16.04.2013, 18:39 **[ТС]**

and_y87, это абсалютно ничего не даёт. Он такой же. Он все там же.

Добавлено через 6 часов 2 минуты
Ап!

@GuardCat · 16.04.2013, 22:10

andr-xw, чего вы мучаетесь с этим неудобным кодом? Написал вам на скорую руку другой. По-моему удобнее. Учтите момент, что css в примере тоже часть прогрессбара.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE HTML>
<html>
  <head>
    <style type = "text/css">
      .progressbarContainer {
        width: 500px;
        background-color: silver;
        border: 2px outset;
      }
      .progressbarBody {
        background-color: #109f10;
        text-align: center;
        font-family: Arial;
        color: white;
      }
    </style>
  </head>
<body>   
  <div id = "progressbar1"></div>
  <script>
    var pb1;
    /**
      Псевдокласс Progressbar принимает HTML-элемент, для размещения прогрессбара,
      максимально допустимое значение для него,
      и стартовое значение. Обязательным является только контейнер.
    */
    function Progressbar(container, maxValue, startValue) {
      if (!container) return {}
      if (maxValue) this.maxValue = maxValue;
      if (startValue) this.startValue = startValue;
      
      this.container = container;
      this.container.className = "progressbarContainer";
 
      this.barBody = document.createElement("div");
      this.barBody.className = "progressbarBody";
      
      this.container.appendChild(this.barBody);
      
      this._value = this.startValue;
      this.setValue(this.startValue);
    }
    
    Progressbar.prototype = {
      // Метод. Устанавливает бару указанное значение
      setValue: function(val) {
        val = +val;
        if (isNaN(val)) return;
        this._value = val;
        this._valueToScreen();
      },
      // Метод. Прибавляет к бару указанное значение
      changeValue: function(val) {
        val = +val;
        if (isNaN(val)) return;
        this._value += val;
        this._valueToScreen();
      },
      
      _valueToScreen: function() {
        if (this._value > this.maxValue) this._value = this.maxValue;
        this.value = (this._value / this.maxValue * 100).toFixed(0);
        this.barBody.style.width = this.value + "%";
        this.barBody.innerHTML = this.barBody.style.width;
      },
      
      constructor: Progressbar,
      maxValue: 100,
      startValue: 0,
      value:0
    }
    
// Проверим работу прогрессбара
// Создаем экземляр бара.
    pb1 = new Progressbar(document.getElementById("progressbar1"));
 
// Тестовая функция увеличивает прогрессбар на случайное число.
      
    function testProgressbar() {
      pb1.changeValue(Math.random() * 5);
      if (pb1.value < 100) setTimeout( testProgressbar, 150 );
    }
    testProgressbar()
  </script>
  
</body>
</html>

Посмотреть вживую.

Тестировал в хроме.

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	16.04.2013, 07:23
	Пока это не сделают в html5 толку не будет, по простому это нельзя, сам JS не позволяет, есть один сложный вариант, но ссылку модеры убьют, и шансов прикрутить тот код мало, он больше демо чем рабочий скрипт, хочешь ссылку пиши в личку. Твой скрипт нужно стартовать по онлоаду, иначе отладчик ругается, сразу заработает в осле, а для остальных нужно пиксели добавить в стилях. 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	16.04.2013, 12:09 [ТС]
	Да, действительно отрисовал нечто похожее где-то внизу, поэтому сразу его не заметил. Ток прогрессбара там никакого нет, только слова "идет загрузка" и процентики. Только "сам создаёт" и "где-нибудь там" меня не устраивает, можно эти его создаваемые тэги заменить на статичный html-код с display:none? Но принцип работы оставить тем же? 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	16.04.2013, 18:39 [ТС]
	and_y87, это абсалютно ничего не даёт. Он такой же. Он все там же. Добавлено через 6 часов 2 минуты Ап! 0