Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2016, 09:45
Новичок на форуме
Отправить личное сообщение для WhatIsJavaScript Посмотреть профиль Найти все сообщения от WhatIsJavaScript
 
Регистрация: 23.08.2016
Сообщений: 4

Не увеличивается ширина блока через style.width
Хочу нарисовать прогресс бар, ширина которого с течением времени постепенно увеличивается.
<div id="progressBar" class="progress-bar"></div>

CSS:
Код:
.progress-bar {
  width: 0;
  height: 20px;
  background: red;
}
Пример я упростил. В оригинале значение step юзер может изменять и в зависимости от этого прогресс бар будет "наполняться" быстрее или медленнее. Сейчас споткнулся на том, что значение ширины прогресс бара увеличивается только один раз (первый), а дальше - не хочет. Почему?.
var valueX = 1000; // некое абстрактное пороговое значение
var valueCurrent = 0;
var progressBar = document.getElementById("progressBar");

// через определенные промежутки времени увеличиваем ширину
setInterval(function() {
  if (valueCurrent <= valueX) {
    var step = 20;
    var per = step / valueX;
    valueCurrent += step;
    progressBar.style.width += per * 100 + '%';
    // в консоли выводится 2%
    console.log(progressBar.style.width);
  }
}, 3000);

https://jsfiddle.net/wpx1xy62/6/
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2016, 10:07
Кандидат Javascript-наук
Отправить личное сообщение для Strongman Посмотреть профиль Найти все сообщения от Strongman
 
Регистрация: 22.03.2016
Сообщений: 132

Может вот так написать?
setInterval(function() {
  if (valueCurrent <= valueX) {
    var step = 20;
    var per = step/valueX;  
    valueCurrent += step;
    progressBar.style.width = valueCurrent;    
    //а per использовать как надпись в ProgressBar
    console.log(progressBar.style.width);
  }
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2016, 10:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

WhatIsJavaScript,
строку 13 перенесите выше и посмотрите что с чем вы складываите.
css правило и атрибут style это не одно тоже!!!
нет атрибута style в теге - нет значения style.width;
и значение это строка

alert("2%" + "2%")

progressBar.style.width = valueCurrent + '%';
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2016, 10:21
Новичок на форуме
Отправить личное сообщение для WhatIsJavaScript Посмотреть профиль Найти все сообщения от WhatIsJavaScript
 
Регистрация: 23.08.2016
Сообщений: 4

Спасибо, проблема решена.
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2016, 10:27
Кандидат Javascript-наук
Отправить личное сообщение для Strongman Посмотреть профиль Найти все сообщения от Strongman
 
Регистрация: 22.03.2016
Сообщений: 132

А, блин, почти угадал. Только 1 строку нужно переправить:
progressBar.style.width = valueCurrent+"px";

Может и Вы мне подскажете где можно найти расшифровки кода исходников Wolfeinstein3D?
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2016, 12:20
Новичок на форуме
Отправить личное сообщение для WhatIsJavaScript Посмотреть профиль Найти все сообщения от WhatIsJavaScript
 
Регистрация: 23.08.2016
Сообщений: 4

Сообщение от Strongman Посмотреть сообщение
А, блин, почти угадал.
Именно, вся разработка на джс сводится к угадыванию
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2016, 10:59
Кандидат Javascript-наук
Отправить личное сообщение для Strongman Посмотреть профиль Найти все сообщения от Strongman
 
Регистрация: 22.03.2016
Сообщений: 132

Да-да-да !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрытие блока через заданное время! Andrey_55 Общие вопросы Javascript 1 02.03.2016 10:04
Значение переменной через запятую DDSSDD Серверные языки и технологии 41 16.10.2014 15:01
ктивация одного блока через другой zerofx Элементы интерфейса 6 14.01.2014 00:28
После скрытия блока через заданное время zoOmer Общие вопросы Javascript 8 13.01.2014 18:51
Помогите с калькулятором piton1175 AJAX и COMET 0 16.06.2011 14:29