Простая задачка. Подскажите с решением

@Oklahoma28place · Регистрация: 14.12.2012

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

Здравствуйте! Я только начал изучать JavaScript и пока не могу писать код нормальный. Подскажите пожалуйста.

Была лёгкая задачка. Вывести на экран 1500 кругов, красного цвета.

Мне удалось её решить))) Вот:

for (var i = 0; i < 1500; i++) {
document.write('<div class = "first"></div>');
}

Классу first я дал следующие свойства:

background-color: red;
width: 100px;
height: 100px;
border-radius: 100px;

Теперь задача такая - Вывести 1500 кругов разного цвета, используя функцию Math.random()

Я написал тэг div уже без свойств так: <div style="background: rgb(255, 255, 0);"></div>

Я понимаю что мне нужно использовать переменные и генерировать строки. Как вывести разного цвета? Подскажите пожалуйста.

@BANO · 14.09.2015, 21:57

Oklahoma28place,
1. на этом форуме сть подсветка кода, используйте пожалуйста её
2.

JavaScript
1
2
3
4
for (var i = 0; i < 1500; i++) {
function r(){return Math.ceil(Math.random()*255)}
document.write('<div class = "first" style="color: rgb('+[r(),r(),r()]+')"></div>');
}

@Oklahoma28place · 14.09.2015, 22:22 **[ТС]**

Не работает.

@BANO · 14.09.2015, 22:24

Oklahoma28place, не работать не может, код правильный, наверное проблема в том, что вы используете document.write
который вообще-то является устаревшим

@Oklahoma28place · 14.09.2015, 22:32 **[ТС]**

Да. Работает. Не могли бы Вы коротко объяснить что каждая строчка делает? Точнее что делает вторая строчка и это - ('+[r(),r(),r()]+')?

@BANO · 14.09.2015, 22:34

Oklahoma28place,
[r(),r(),r()] создаёт массив из чисел, которые вернула фун-ия r

@Oklahoma28place · 14.09.2015, 22:38 **[ТС]**

А это return Math.ceil(Math.random()*255)?

@BANO · 14.09.2015, 22:44

Oklahoma28place, это модификация обычной функции Math.random

Math.random возвращает число в дипазоне [0,1) и скобки верные, поскольку вам никогда не выпадет 1
потом мы просто берём это число, которое нам выкинула .random() и умножаем на 255
но тогда у нас получается десятичная дробь, а нам нужно целое число
для этого мы вызываем .ceil(), аналогом которого является .round(), но ceil пишется короче по этому мы используем его

Добавлено через 1 минуту
можно короче написать

JavaScript
1
function r(){return Math.random()*256|0}

теперь фун-ия сначала умножает рандом на 256 а потом берёт число, которое стоит до запятой, то есть те числа которые стоят после запятой тупо одбрасываются

@Oklahoma28place · 14.09.2015, 22:46 **[ТС]**

Спасибо!

Добавлено через 2 минуты
[0,1) и скобки верные. Какие скобки. В коде таких нет.

@BANO · 14.09.2015, 22:50

Не по теме:

спасибо можно сказать либо кликнув на кнопку "спасибо" на моём посте, либо нажав на "лучший ответ", просто подсказываю
мне будет приятно

Добавлено через 1 минуту

Сообщение от Oklahoma28place

Какие скобки. В коде таких нет.

так в геометрии описывают диапазон, в который входит нуль, но не входит 1

@kalabuni · 14.09.2015, 22:52

Сообщение от BANO

не работать не может, код правильный

самоуверенность - это хорошо

ответьте на два вопроса
1) зачем 1500 раз определять функцию r () ?

2) как изменение значения свойства стиля color может повлиять на цвет фона контейнера?

@BANO · 14.09.2015, 22:55

Не по теме:

Сообщение от kalabuni

самоуверенность - это хорошо

я всегда ей отличался

Сообщение от kalabuni

зачем 1500 раз определять функцию r ()

не 1500 раз обявлять, а не выносить её в глобальную видемость

Сообщение от kalabuni

как изменение значения свойства стиля color может повлиять на цвет фона контейнера?

вот с этим полностью согласен

JavaScript
1
2
3
4
for (var i = 0; i < 1500; i++) {
    function r(){return Math.random()*256|0}
    document.write('<div class = "first" style="background: rgb('+[r(),r(),r()]+')"></div>');
}

@kalabuni · 14.09.2015, 23:20

Сообщение от BANO

не 1500 раз обявлять, а не выносить её в глобальную видемость

c каких пор включение/невключение в тело цикла влияет на видимость переменной?

это же не функция, а всего лишь цикл

@BANO · 14.09.2015, 23:23

Сообщение от kalabuni

это же не функция, а всего лишь цикл

точно, что-то я тупанул
да на самом деле это не влияет в данном случае, можно будет только {} убрать у цикла, если мы вынесем фун-ию

Добавлено через 1 минуту
kalabuni, ладно я понял, что к моему коду можно придраться, но факт есть факт,
код работает

Не по теме:

я что-то уже перечитал es6 и про let
аж начинаю теряться в областях видимости

@kalabuni · 15.09.2015, 06:23

Сообщение от BANO

я понял, что к моему коду можно придраться, но факт есть факт,
код работает

нет, не работает
но, если отсутствующий в вашем коде класс определить - тогда да, заработает

имхо, класс здесь только загрязняет код, без него проще, в смысле -- нагляднее

HTML5
1
2
3
4
5
6
7
<script>
function r () {return Math.ceil (Math.random () * 256)}
 
for (var j = 1; j <= 1500; j++) with (document)
write ('<div style="text-align: center; line-height: 100px; margin: 2px; display: inline-block; width: 100px; '),
write ('height: 100px; border-radius: 100px; background: rgb(' + [r (), r (), r ()] + ')">' + j + '</div>');
</script>

@Karssen · 15.09.2015, 09:12

Сообщение от kalabuni

for (var j = 1; j <= 1500; j++) with (document)

Разве with еще используется? Она ж снижает производительность

@BANO · 15.09.2015, 16:55

kalabuni, всё у меня работает и без вашего кода, вы наверное просто классы css, которые представил ТС, не воткнули в html

Добавлено через 1 минуту

Сообщение от kalabuni

если отсутствующий в вашем коде класс определить

если вы не заметили я написал js код, который влепляется вместо кода js, который был написан ТС, на html страничке ТС

@kalabuni · 15.09.2015, 18:46

BANO, я-то заметил, но ТС, видимо, нет, потому у ТС и возникли проблемы

@BANO · 15.09.2015, 18:53

kalabuni, а вы вот этот пост не видели?

Сообщение от Oklahoma28place

Да. Работает. Не могли бы Вы ко...

@kalabuni · 15.09.2015, 19:25

BANO, переформулирую:

я-то заметил СРАЗУ, а ТС, видимо, НЕ СРАЗУ, потому у ТС и возникли ПОНАЧАЛУ проблемы

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Oklahoma28place 3 / 3 / 1 Регистрация: 14.12.2012 Сообщений: 395

	Простая задачка. Подскажите с решением 14.09.2015, 21:48. Показов 2119. Ответов 33 Метки нет (Все метки) Здравствуйте! Я только начал изучать JavaScript и пока не могу писать код нормальный. Подскажите пожалуйста. Была лёгкая задачка. Вывести на экран 1500 кругов, красного цвета. Мне удалось её решить))) Вот: for (var i = 0; i < 1500; i++) { document.write('<div class = "first"></div>'); } Классу first я дал следующие свойства: background-color: red; width: 100px; height: 100px; border-radius: 100px; Теперь задача такая - Вывести 1500 кругов разного цвета, используя функцию Math.random() Я написал тэг div уже без свойств так: <div style="background: rgb(255, 255, 0);"></div> Я понимаю что мне нужно использовать переменные и генерировать строки. Как вывести разного цвета? Подскажите пожалуйста. 0

@Oklahoma28place 3 / 3 / 1 Регистрация: 14.12.2012 Сообщений: 395
	14.09.2015, 22:22 [ТС]
	Не работает. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.09.2015, 22:24
	Oklahoma28place, не работать не может, код правильный, наверное проблема в том, что вы используете document.write который вообще-то является устаревшим 0

@Oklahoma28place 3 / 3 / 1 Регистрация: 14.12.2012 Сообщений: 395
	14.09.2015, 22:32 [ТС]
	Да. Работает. Не могли бы Вы коротко объяснить что каждая строчка делает? Точнее что делает вторая строчка и это - ('+[r(),r(),r()]+')? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	14.09.2015, 22:34
	Oklahoma28place, [r(),r(),r()] создаёт массив из чисел, которые вернула фун-ия r 0

@Oklahoma28place 3 / 3 / 1 Регистрация: 14.12.2012 Сообщений: 395
	14.09.2015, 22:38 [ТС]
	А это return Math.ceil(Math.random()*255)? 0

@Oklahoma28place 3 / 3 / 1 Регистрация: 14.12.2012 Сообщений: 395
	14.09.2015, 22:46 [ТС]
	Спасибо! Добавлено через 2 минуты [0,1) и скобки верные. Какие скобки. В коде таких нет. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	15.09.2015, 18:46
	BANO, я-то заметил, но ТС, видимо, нет, потому у ТС и возникли проблемы 0