Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение ширины блока каждый n-секунд (https://javascript.ru/forum/dom-window/24961-izmenenie-shiriny-bloka-kazhdyjj-n-sekund.html)

AntoXa987 20.01.2012 11:28

Изменение ширины блока каждый n-секунд
 
Привет!

Все копаюсь я в интернете и не могу найти ничего подходящего. Может кто нибудь поможет решить мою проблему. В js только вникаю, но пока не очень успешно...

И так, вот задача:

Есть блок div id="1" и нужно сделать так, что бы каждые пара секунд у него из width вычиталось по 5 пикселей. Без нажатий - сразу после запуска страницы. Это должно происходить онлайн.

Теоретически я знаю, что нужно получить элемент по ID, затем видимо убрать последние 2 символа (px) из переменной, вычесть из получившегося числа 5, затем к результату дописать px и поместить назад в переменную, подождать пару сек и запустить цикл заново, пока width не кончится. Вот только что-то ничего у меня не получилось.

Всем заранее огромное спасибо!

Pavel M. 20.01.2012 12:19

можно начать читать http://javascript.ru/blog/Andrej-Par...cii-JavaScript

AntoXa987 20.01.2012 12:25

Спасибо конечно, я видео уроки Попова себе скачал, начну с них, а потом уже буду справочники читать. Но в сейчас просил помочь по скрипту, а не по литературе...

AntoXa987 20.01.2012 12:27

Прошу прощения, там действительно полезная инфа! Думал просто ссылка на справочник =) Еще раз сорри!

nerv_ 20.01.2012 13:06

AntoXa987, простой пример можно посмотреть здесь.

AntoXa987 20.01.2012 14:39

Блин, совсем не варит голова...
Пытаюсь сделать так:
var x = str.substring(0, "document.getElementById("1").style.width.length" - 2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число
for(i=0;i<100;i++) {
x -= 10;
document.getElementById("1").style.width = x+'px';
//ну и тут я еще не разобрался как задержку в пару сек сделать
}

melky 20.01.2012 16:32

Цитата:

Сообщение от AntoXa987 (Сообщение 151661)
Блин, совсем не варит голова...
Пытаюсь сделать так:
var x = str.substring(0, "document.getElementById("1").style.width.length" - 
2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число

?!
alert( *!*parseInt("53px")*/!* );



я бы так сделал.
var el = document.getElementById("1"), // id не может начинаться с числа. это просто пример
     current = el.style.width, // текущее значение ширины.
     duration = 600; // продолжительность в мсек
     started, // время начала анимации
     progr, // её прогресс.
     id; // ID интервала, чтобы его завершить.

if(!current){     // если ширина не указана в атрибуте style
     // кроссбраузерно получаем текущую ширину
     if('\v' == 'v'){   //короткое определение старого IE < 9
          current = el.currentStyle;
     } else {
          current = getComputedStyle(el, null);
     }
     current = current.width;   
}

// теперь преобразуем её в число.
current = parseInt(currentStyle);

started = Date.now(); // отмечаем начало анимации

// ну и анимируем.
id = setInterval(function(){
     progr = (Date.now() - started) / duration;
     
     if(progr > 1) { // анимация закончена
          clearTimeout(id);
          el.style.display = 'none';
     } else { // ещё продолжается
          el.style.width = current * ( 1 - progr ) + 'px';
     }
}, 15);

nerv_ 20.01.2012 18:12

AntoXa987, обратите внимание на пост от melky. В часности на то, что подчеркнуто. Это самый оптимальный вариант. В ссылке, которую приводил я, данный момент реализован через regexp потому, что я в них практикуюсь, и те регулярный выражения были одни из первых :)


Часовой пояс GMT +3, время: 12:26.