Пример решения задачи на языке программирования JavaScript - пример анимации #часть1 - OkZachet.Ru
 

OkZachet.Ru

Решение задач и контрольных работ|Помощь на экзамене|Онлайн тесты

Скоро сессия студент? OkZachet.Ru - и нет проблем
Опыт. Качество. Гарантии. Бесплатные доработки.
г. Первоуральск, тел. 8(908)639-54-09, email: admin@okzachet.ru

  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта
Главная Информатика и программирование JavaScript Пример решения задачи на языке программирования JavaScript - пример анимации #часть1
E-mail Печать PDF

Пример решения задачи на языке программирования JavaScript - пример анимации #часть1

javascript программирование

Условие:
Разработать скрипт для движения квадрата внутри другого квадрата по одной из его сторон.

Результат работы:
Для повтора обновите страницу.

Код javascript (вставлять между тегами <head> и </head>):

<script>
//вызываем функцию после загрузки страницы
window.onload = function() {
var lpos = 0; //положение left элемента box внутри элемента container
var tpos = 0; //положение top элемента box внутри элемента container
var box = document.getElementById('box'); //получить элемент box
var t = setInterval(move, 10); ///задаем интервал обновления положения для элемента box

function move() {
//движение вправо
if(tpos == 0 && lpos < 150){
lpos++;
box.style.left = lpos + 'px';
}
//остановка движения квадрата
if(tpos == 0 && lpos == 150){
clearInterval(t);
}
}
};
</script>

Код CSS (вставлять между тегами <head> и </head>):

<style>
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>

Код HTML (вставлять между тегами <body> и </body>):

<div id="container">
<div id="box"> </div>
</div>

Решение задачи на языке программирования JavaScript завершено.

Если все же у Вас остались вопросы по выполнению заданий, то Вы можете ознакомиться с общей информацией по решению контрольных работ и задач на заказ на сайте OkZachet.Ru.

С Уважением, Администратор сайта.

Обновлено 29.08.2017 18:45  

Добавить комментарий

Перед опубликованием все комментарии модерируются!


Пройти опрос 1

По какому предмету Вам нужна помощь?
 

Пройти опрос 2

Из какого вы города?
 

Пройти опрос 3

Что нужно добавить на сайт?