JavaScript:Библиотеки/p5.dom/createSlider(): различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) Нет описания правки |
Нет описания правки |
||
| Строка 14: | Строка 14: | ||
Чтобы воспользоваться этой функцией, нужно подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее: | Чтобы воспользоваться этой функцией, нужно подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее: | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script> | <script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 20: | Строка 20: | ||
==Синтаксис== | ==Синтаксис== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
createSlider(min, max, [value], [step]) | createSlider(min, max, [value], [step]) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 26: | Строка 26: | ||
==Параметры== | ==Параметры== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
min – минимальное значение ползунка. Тип данных – number | min – минимальное значение ползунка. Тип данных – number | ||
max – максимальное значение ползунка. Тип данных – number | max – максимальное значение ползунка. Тип данных – number | ||
| Строка 35: | Строка 35: | ||
==Возвращаемое значение== | ==Возвращаемое значение== | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
Указатель на p5.Element, хранящий созданный узел. Тип данных – объект, p5.Element. | Указатель на p5.Element, хранящий созданный узел. Тип данных – объект, p5.Element. | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Строка 43: | Строка 43: | ||
===№1=== | ===№1=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var slider; | var slider; | ||
function setup() { | function setup() { | ||
| Строка 59: | Строка 59: | ||
===№2=== | ===№2=== | ||
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS | <syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS"> | ||
var slider; | var slider; | ||
function setup() { | function setup() { | ||
Текущая версия от 18:14, 14 мая 2023
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
|
Черновик |
createSlider() [1]
Описание
Создает в DOM ползунок при помощи элемента <input></input>. Чтобы задать экранную длину ползунка, воспользуйтесь функцией size(). Если указан узел контейнера, присоединяется к нему, если не указан – к «телу» (<body>).
Чтобы воспользоваться этой функцией, нужно подключить библиотеку p5.dom. Для этого в заголовок своего файла «index.html» впишите следующее:
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script>
Синтаксис
createSlider(min, max, [value], [step])
Параметры
min – минимальное значение ползунка. Тип данных – number
max – максимальное значение ползунка. Тип данных – number
value – значение ползунка по умолчанию. Тип данных – number
step – размер шага ползунка (если указать в этом параметре «0», ползунок будет перемещаться с минимально возможным шагом). Тип данных – number
Возвращаемое значение
Указатель на p5.Element, хранящий созданный узел. Тип данных – объект, p5.Element.
Пример
№1
var slider;
function setup() {
slider = createSlider(0, 255, 100);
slider.position(10, 10);
slider.style('width', '80px');
}
function draw() {
var val = slider.value();
background(val);
}
№2
var slider;
function setup() {
colorMode(HSB);
slider = createSlider(0, 360, 60, 0);
slider.position(10, 10);
slider.style('width', '80px');
}
function draw() {
var val = slider.value();
background(val, 100, 100, 1);
}
