Движения квадрата влево и вправо

@TripleH · Регистрация: 13.02.2012

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

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

@Micheal · 12.05.2014, 22:06

нужно указать для дива способ отображения position:absolute, а в событиях нажатия на кнопку прописать ихменение свойств left и right для дива соответственно

@TripleH · 12.05.2014, 22:14 **[ТС]**

что-то я не понял для чего еще один див? в общем порылся на форумах еще, нашел похожий код и изменил под свое задание, вроде работает.
вот может кому еще пригодится:

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
<html>
<body>
<script>
 
  function left() {
  if (parseInt(document.getElementById("block").style.right) < 1100) {
     document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)+2
     setTimeout("left()",10)
     
   }
}
function right() {
  if (parseInt(document.getElementById("block").style.right) > 20) {
     document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)-2
     setTimeout("right()",10) ;
 
   }
}
</script>
 
<div id="block" style="position:absolute; right:550px; top:10px; WIDTH: 150px; HEIGHT: 150px; BACKGROUND-COLOR: black;">
 
<br>
<input type="button" value="Left" onclick="javascript:left();">
<input type="button" value="Right" onclick="javascript:right();">
</div>
</body>
</html>

@Micheal · 12.05.2014, 22:33

Я тоже не знаю зачем еще один див

HTML5
1
2
3
4
5
<body>
    <div id="d1" style="left:0"></div>
    <input value="<=" type="button" onclick="l();" class="bt"/>
    <input value="=>" type="button" onclick="r();" class="bt"/>
</body>

CSS:

CSS
1
2
3
4
5
6
7
#d1
{
    width:100px;
    height:100px;
    position:relative;
    background-color:green;
}

JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function l() {
    var q = document.getElementById('d1');
    
    if (parseInt(q.style.left) > 0) {        
        q.style.left = ((parseInt(q.style.left) - 1) + 'px');
    }
}
 
function r() {
    var q = document.getElementById('d1');
 
    if (parseInt(q.style.left) < window.screen.availWidth) {
        q.style.left = ((parseInt(q.style.left) + 1) + 'px');
    }
}

не обновил страницу

Новые блоги и статьи Все статьи Все блоги /
JWT аутентификация в ASP.NET Core UnmanagedCoder 18.06.2025 Разрабатывая веб-приложения, я постоянно сталкиваюсь с дилеммой: как обеспечить надежную аутентификацию пользователей без ущерба для производительности и масштабируемости? Классические подходы на. . .	Краткий курс по С# aaLeXAA 18.06.2025 Здесь вы найдете все необходимые функции чтоб написать програму на C# Задание 1: КЛАСС FORM 1 public partial class Form1 : Form { Spisok listin = new Spisok(); . . .	50 самых полезных примеров кода Python для частых задач py-thonny 17.06.2025 Эффективность работы разработчика часто измеряется не количеством написаных строк, а скоростью решения задач. Готовые сниппеты значительно ускоряют разработку, помогают избежать типичных ошибок и. . .	C# и продвинутые приемы работы с БД stackOverflow 17.06.2025 Каждый . NET разработчик рано или поздно сталкивается с ситуацией, когда привычные методы работы с базами данных превращаются в источник бессонных ночей. Я сам неоднократно попадал в такие ситуации,. . .	Angular: Вопросы и ответы на собеседовании Reangularity 15.06.2025 Готовишься к техническому интервью по Angular? Я собрал самые распространенные вопросы, с которыми сталкиваются разработчики на собеседованиях в этом году. От базовых концепций до продвинутых. . .
Архитектура Onion в ASP.NET Core MVC stackOverflow 15.06.2025 Что такое эта "луковая" архитектура? Термин предложил Джеффри Палермо (Jeffrey Palermo) в 2008 году, и с тех пор подход только набирал обороты. Суть проста - представьте себе лук с его. . .	Unity 4D GameUnited 13.06.2025 Четырехмерное пространство. . . Звучит как что-то из научной фантастики, правда? Однако для меня, как разработчика со стажем в игровой индустрии, четвертое измерение давно перестало быть абстракцией из. . .	SSE (Server-Sent Events) в ASP.NET Core и .NET 10 UnmanagedCoder 13.06.2025 Кажется, Microsoft снова подкинула нам интересную фичу в новой версии фреймворка. Работая с превью . NET 10, я наткнулся на нативную поддержку Server-Sent Events (SSE) в ASP. NET Core Minimal APIs. Эта. . .	С днём независимости России! Hrethgir 13.06.2025 Решил побеседовать, с утра праздничного дня, с LM о завоеваниях. То что она написала о народе, представителем которого я являюсь сам сначала возмутило меня, но дальше только смешило. Это чисто. . .	Лето вокруг. kumehtar 13.06.2025 Лето вокруг. Наполненное бурями и ураганами событий. На фоне магии Жизни, священной и вечной, неумелой рукой человека рисуется панорама душевного непокоя. Странные серые краски проникают и. . .

@TripleH 2 / 2 / 0 Регистрация: 13.02.2012 Сообщений: 15

	Движения квадрата влево и вправо 12.05.2014, 18:24. Показов 17180. Ответов 3 Метки нет (Все метки) Добрый вечер, вновь требуется помощь. есть квадрат который я дивом сделал, есть еще кнопка вправо и кнопка влево. нужно чтобы при нажатии на соответствующие кнопки квадрат двигался в стороны. т.е. к примеру мы нажали влево, он двигается влево, затем нажали вправо, он стал двигать вправо с того же места. 0

@Micheal 53 / 53 / 28 Регистрация: 23.04.2011 Сообщений: 214
	12.05.2014, 22:06
	нужно указать для дива способ отображения position:absolute, а в событиях нажатия на кнопку прописать ихменение свойств left и right для дива соответственно 0

Опции темы