Функция для рисования кругов

@Damira91 · Регистрация: 05.03.2020

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

Доброго времени суток, необходимо написать метод для рисования кругов (в данном случае 20 кругов со случайным диаметром от 50 до 200 px, случайным цветом и случайными координатами). Console не выводит ошибок, просто не работает, хотя сама функция вызвана

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
$(document).ready(function(){
            let colors = ["purple", "orange","green", "pink", "cyan", "maroon", "blue", "brown", "grey", "yellow", "black"]
 
            function DrawCircles() {
                for(let i=0; i<20; i++)
                {
                let diameter = function (min, max) {
                 min = Math.ceil(min);
                 max = Math.floor(max);
                return Math.floor(Math.random()*(max - min + 1))+ min;
                }
                let randomColor = colors[Math.floor(Math.random()*colors.length)];
                let color = $('.circles').css("color", randomColor);
                let x = Math.floor(Math.random()*($(window).innerWidth - diameter(50, 200)))+ diameter(50, 200);
                let y = Math.floor(Math.random()*($(window).innerHeight - diameter(50, 200))) + diameter(50, 200);
                let location = $('.circles').css('position', 'absolute', 'top', x, 'left', y);
                let circle = $('<div>').addClass('circles').css('border-radius', '50%', color, location).width(diameter(50, 200)).height(diameter(50, 200));
                $('body').append(circle);
                setInterval(function(){
                }, 1000);   
            } 
            } 
            DrawCircles(20);
            
        });

@Уф · 16.03.2020, 17:52

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
$(document).ready(function(){
            let colors = ["purple", "orange","green", "pink", "cyan", "maroon", "blue", "brown", "grey", "yellow", "black"]
 
            function DrawCircles() {
                for(let i=0; i<20; i++)
                {
                let diameter = function (min, max) {
                 min = Math.ceil(min);
                 max = Math.floor(max);
                return Math.floor(Math.random()*(max - min + 1))+ min;
                }
                let randomColor = colors[Math.floor(Math.random()*colors.length)];
                let x = Math.floor(Math.random()*(window.innerWidth - diameter(50, 200)))+ diameter(50, 200);
                let y = Math.floor(Math.random()*(window.innerHeight - diameter(50, 200))) + diameter(50, 200);
                console.log(x,y);
                let circle = $('<div>').addClass('circles').css({'border-radius':'50%', border: "1px solid black", "background-color":randomColor, 'position': 'absolute', 'top':x, 'left': y}).width(diameter(50, 200)).height(diameter(50, 200));
                $('body').append(circle);
                setInterval(function(){
                }, 1000);   
            } 
            } 
            DrawCircles(20);
            
        });

@Damira91 · 17.03.2020, 08:12 **[ТС]**

Спасибо "Уф", правда обнаружила, что функция рисует не круги, а овалы на одном месте, а должна по всему экрану. В общем немного отредактировала код и вроде получилось.

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
$(document).ready(function(){
            let colors = ["purple", "orange","green", "pink", "cyan", "maroon", "blue", "brown", "grey", "yellow", "black"]
 
            function DrawCircles() {
                for(let i=0; i<20; i++)
                {
                let diameter = function (min, max) {
                 min = Math.ceil(min);
                 max = Math.flooУфr(max);
                return Math.floor(Math.random()*(max - min + 1))+ min;
                }
                let randomColor = colors[Math.floor(Math.random()*colors.length)];
                let color = $('.circles').css("color", randomColor);
                let x = Math.floor(Math.random()*$window.innerWidth [S]- diameter(50, 200)))+ diameter(50, 200);[/S] // ограничивает площадь экрана для рисования
                let y = Math.floor(Math.random()*$window.innerHeight [S]- diameter(50, 200))) + diameter(50, 200)[/S];
                let width = diameter(50, 200);
                let circle = $('<div>').addClass('circles').css({'border-radius': '50%', 'background-color': randomColor, 
                'position' : 'absolute', 'top': x, 'left': y, 'width': width, 'height': width}); // когда 'width': diameter(50,200) и 'height;:(diameter(50, 200), то значения у них получаются и разные и вместо кругов функция рисует овалы 
                $('body').append(circle);
                 
            } 
            } 
            DrawCircles(20);
            
        });

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .