Почему только два кружочка двигаются?

@Илья2002 · Регистрация: 16.03.2017

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

Я создал 4 кружочка на странице, которые должны двигаться против часовой стрелки заменяя друг друга. Но происходит что-то непонятное. Они телепортируются и не против часовой стрелки идут да и не по часовой. И почему-то только у двух кружочков есть анимация передвижения. Все остальные мгновенно перемещаются. Как сделать,чтобы всё работало?

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
    <p class = "circle c1"></p>
    <p class = "circle c2"></p>
    <p class = "circle c3"></p>
    <p class = "circle c4"></p>
</body>
<head> <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script src="js.js"></script>
</head>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.circle {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100px; 
}
    .c1 {
        background-color: blue;
    }
    .c2 {
        background-color: darkorchid;
    }
    .c3 {
        background-color: forestgreen;
    }
    .c4 {
        background-color: aqua;
    }

JavaScript
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
function c(){
var cr = [[48,47],[51,47],[48,51],[51,51]],
v = Array.from(document.getElementsByClassName("circle")),
html = document.documentElement;
console.log(v);
function s() {
    w = html.clientWidth;
    h = html.clientHeight;
    cr[4] = cr[3];
    cr[5] = cr[0];
    cr[6] = cr[1];
    cr[7] = cr[2];
    cr = cr.slice(4,);
    x = -1;
    v.forEach (function (i,i1, v) {
        x += 1;
        l = w / 100 * cr[x][0];
        t = h / 100 * cr[x][1];
        i.style.marginLeft = l;
        i.style.marginTop = t;
        i.style.transition = "margin-left 250ms";
        i.style.transition = "margin-top 250ms";
        console.log(i);
    });}
setInterval(s, 1000);
}
document.addEventListener("DOMContentLoaded", c);

https://yadi.sk/d/ynxyN82b3P8Eb9 Все файлы тут.

@TinSemenova · 27.10.2017, 16:28

Двигаются по часовой стрелке!

JavaScript
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
function c(){
var cr = [[48,47],[48,51],[51,51],[51,47]],
v = Array.from(document.getElementsByClassName("circle")),
html = document.documentElement;
    w = html.clientWidth;
    h = html.clientHeight;
    
function s() {
for(m=0;m<3;m++){
        per=cr[m];
        cr[m]=cr[m+1];
        cr[m+1]=per;        
}
 
    v.forEach (function (i, k, v) {
 
        l = w / 100 * cr[k][0];
        t = h / 100 * cr[k][1];
 
        i.style.marginLeft = l;
        i.style.marginTop = t;
 
        i.style.transition = "all 250ms";
 
});}
setInterval(s, 1000);
}
document.addEventListener("DOMContentLoaded", c);

@TinSemenova · 27.10.2017, 16:34

Здравствуйте!
Прикрепила ещё отредактированный архив.

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .