Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.03.2014, 19:42   #1
Maks2396
Пользователь
 
Регистрация: 24.11.2013
Сообщений: 13
По умолчанию Движение текста

Текст передвигается по контуру квадрата.
Нужно сделать, чтоб размер квадрата вводил пользователь и начало движения начиналось при нажатии на кнопку.
Код HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<script type="text/javascript"> 
  var id = setInterval(function(){ 
    // Работа таймера 
    var idt = document.getElementById('timer'); 
    idt.innerHTML = parseInt(idt.innerHTML) + 1; 
    // Текст который движется 
    var txt = document.getElementById('txt'); 
    // Размер квадрата 
    var ids = document.getElementById('id_size'); 
    var size = parseInt(ids.innerHTML); 
    // Координаты 
    var idx = document.getElementById('id_x'); 
    var x = parseInt(idx.innerHTML); 
    var idy = document.getElementById('id_y'); 
    var y = parseInt(idy.innerHTML); 
    // Достигнут ли правый нижний угол 
    var idl = document.getElementById('id_lr'); 
    var lr = parseInt(idl.innerHTML); 
    if(x >= size && y >= size) 
    { 
      // Достигнут правый нижний угол
      idl.innerHTML = 1; 
      lr = 1; 
    } 
    // Идем вправо 
    if(lr == 0) 
    { 
      if(x < size) 
      { 
        idx.innerHTML = x + 1; 
        txt.style.paddingLeft = x; 
      } 
      // Идем вниз 
      else if(y < size) 
      { 
        idy.innerHTML = y + 1; 
        txt.style.paddingTop = y; 
      } 
    } 
    else 
    { 
      // Идем влево
      if(y > 0 && x > 0) 
      { 
        idx.innerHTML = x - 1; 
        txt.style.paddingLeft = x; 
      } 
      // Идем вверх 
      else if(y > 0) 
      { 
        idy.innerHTML = y - 1; 
        txt.style.paddingTop = y; 
      } 
      else 
      { 
        // Мы достигли начальной точки 
        // отключаем таймер 
        clearInterval(id); 
      } 
    } 
  }, 20); 
</script> 
<div>size = <span id='id_size'>100</span>, 
     x = <span id='id_x'>0</span>, 
     y = <span id='id_y'>0</span>, 
     lr = <span id='id_lr'>0</span>, 
     timer = <span id='timer'>0</span></div> 
<div id='txt'>Заданный текст</div>
</body>
</html>

Последний раз редактировалось Stilet; 17.03.2014 в 20:41.
Maks2396 вне форума Ответить с цитированием
Старый 18.03.2014, 14:08   #2
ATL
Форумчанин
 
Аватар для ATL
 
Регистрация: 26.01.2007
Сообщений: 278
По умолчанию

Как-то так?
Правда jsfiddle движение не показывает. Скопируйте код и пробуйте у себя.

PS: не забудьте подключить библиотеку jQuery.

Последний раз редактировалось ATL; 18.03.2014 в 14:59.
ATL вне форума Ответить с цитированием
Старый 18.03.2014, 18:12   #3
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Не надо вешать jQuery.

Вам достаточно весь js-код завернуть в функцию move, и её вызывать при нажатии на кнопку; а также заменить ваши span с идентификаторами на input и получать значения обращаясь не к свойству ".innerHTML", а к ".value"
^-.-^ My GitHub

Последний раз редактировалось Fenex; 18.03.2014 в 19:05.
Fenex вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Движение со скоростью света и быстрее скорости света - Сверхсветовое движение Alar Свободное общение 354 13.11.2011 21:32
Движение колец и Движение линий сверху Iren1993 Помощь студентам 2 07.11.2011 19:48
Движение текста Vinnipux JavaScript, Ajax 4 25.02.2011 06:47
Движение текста по Label'у Vladya Помощь студентам 9 02.04.2009 20:58
Движение текста вместе с автофигурой Sleepwalker Microsoft Office Excel 2 13.12.2006 12:35