Сделать четыре кнопки, сегментировать их на 30 делений каждую. При нажатии кнопки закрашивался один её сегмент.

@malkovan · Регистрация: 21.10.2018

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

Привет.
Постигаю азы, спать/есть не могу, хочу быть среди тех кто умеет делать "матрицу"))

Начитался разных самоучителей, каких-то в большей, каких-то в меньшей степени,
но уже думаю в практике закрепление навыков будет существенно эффективнее.

Задача такая: сделать четыре кнопки, сегментировать их на 30 делений каждую.
Чтобы при нажатии кнопки закрашивался один её сегмент.
(по типу как индикация зарядки акб на мобильнике, потихоньку символ батарейки закрашивается)
И получится своеобразный счётчик нажатий на кнопку.
При нажатии 30 раз, кнопка закрашивается полностью и к примеру становится не активной.

На данный момент посредством HTML (тег BUTTON, без FORM) просто сделал пока кнопки.
CSS создал нужный размер, положение и цвет (ещё не до конца).

Вопрос.
Подскажите в общих чертах, вектор дальнейшей работы, а реализовать я попробую на сколько хватит соображалки)
Т.е. с чего начать и какой-то алгоритм работы такого счётчика.
Подскажите, други?)

Qwerty_Wasd · 22.10.2018, 00:38

malkovan, объявите и инициализируйте глобальную переменную, которую будете инкременировать по нажатию. Пока не достигли 30, закрашивать одну из частей кнопки по нажатию. Вот собственно и все.

Под кат смотреть только после того, как попытаетесь реализовать сами.

Кликните здесь для просмотра всего текста

Песочница - https://codepen.io/qwerty_wasd/pen/aRjdpy

HTML5
1
2
3
4
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>

CSS
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
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.button {
  margin: 100px auto;
  border: 2px solid #000000;
  height: 50px;
  width: 150px;
  display: grid;
  grid-template: repeat(3, 1fr)/repeat(10, 1fr);
  cursor: pointer;
}
.button > .piece {
  border: 1px solid #000000;
}
 
.filled {
  background: green;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const bts = Array.from(document.getElementsByClassName('button')),
      counts = bts.map(e => 0),
      fillPcs = e => {
          if (counts[bts.indexOf(e.target.parentElement)] < 30) {
            e.target.parentElement.children[counts[bts.indexOf(e.target.parentElement)]].classList.add('filled');
            counts[bts.indexOf(e.target.parentElement)]++;
          }
      };
Array.from(document.getElementsByClassName('button'), (e, i) => {
  Array.from(Array(30).keys(), () => {
    let piece = document.createElement('div');
    piece.classList.add('piece');
    e.appendChild(piece);
  });
  e.addEventListener('click', fillPcs);
});

@klopp · 22.10.2018, 10:38

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

по типу как индикация зарядки акб на мобильнике

HTML5
1
<div id="btn"><div id="progress">  </div></div>

CSS
1
2
3
4
5
6
7
8
9
10
#btn {
    width: 90px;
    height: 20px;
    border: 1px solid;
}
#progress {
    width: 0px;
    height: 20px;
    background: coral;
}

JavaScript
1
2
3
4
5
6
7
let btn = document.getElementById('btn');
let progress = document.getElementById('progress');
let delta = 0;
const addProgress = () => {
    if(delta >= 90) return;
    progress.style.width = (delta += 3) + 'px';};
btn.addEventListener('click', addProgress);

Qwerty_Wasd · 22.10.2018, 21:42

klopp, тоже варик, отличный кстати.

Правда одну деталь забыли

Кнопки 4 штуки.
Тогда уж как-то так - https://codepen.io/qwerty_wasd/pen/YJOPOO

HTML5
1
2
3
4
<div class="button">Кнопка</div>
<div class="button">Кнопка</div>
<div class="button">Кнопка</div>
<div class="button">Кнопка</div>

CSS
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
29
30
31
32
33
34
35
36
37
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
.button {
  position: relative;
  margin: 100px auto;
  border: 2px solid #000000;
  border-radius: 5px;
  height: 30px;
  line-height: 1.5rem;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
 
.filled {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: green;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let bts = document.getElementsByClassName('button'),
    counts = Array.from(bts, e => 0);
const fillPcs = e => {
  if (counts[[...bts].indexOf(e.target)] < 30) {
    e.target.firstElementChild.style.width=`${(e.target.offsetWidth * counts[[...bts].indexOf(e.target)]) / 30}px`;
    counts[[...bts].indexOf(e.target)]++;
  }
};
Array.from(bts, e => {
  let fillBts = document.createElement('div');
  fillBts.classList.add('filled');
  e.appendChild(fillBts);
  e.addEventListener('click', fillPcs);
});

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

@klopp · 22.10.2018, 22:11

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

Кнопки 4 штуки.

ну дык размножить поди ТС сам догадается, надо же и ему оставить что-то поделать)))
Кста, в вашем варианте заполнение начинается только со второго клика

Qwerty_Wasd · 22.10.2018, 22:20

klopp,

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

Кста, в вашем варианте заполнение начинается только со второго клика

да есть такое ) Это из-за того что массив counts инициализирован нолями. Можно начать с единицы, но понту нету. Ибо по 30-му клику дискотека закончится правильно в любом случае ))

@klopp · 22.10.2018, 23:10

вариант с четырьмя кнопками
Убрал глобальные переменные

HTML5
1
2
3
4
<div class="btn"><div class="progress"></div></div>
<div class="btn"><div class="progress"></div></div>
<div class="btn"><div class="progress"></div></div>
<div class="btn"><div class="progress"></div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.btn {
    width: 90px;
    height: 20px;
    border: 1px solid;
    box-shadow: inset rgba(255,255,255,0.2) 8px  8px 18px 5px,
                inset rgba(0,0,75,0.5)      -8px -8px 18px 5px;
    border-radius: 5px;
    margin-top: 5px;
}
.progress {
    width: 0px;
    height: 20px;
    background: coral;
    box-shadow: inset rgba(255,255,255,0.2) 8px  8px 18px 5px,
                inset rgba(0,0,75,0.5)      -8px -8px 18px 5px;
    border-radius: 3px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let btn = document.querySelectorAll('.btn');
let progress = document.querySelectorAll('.progress');
function makeCounter() {
  let currentCount = 0;
  return () => currentCount += 3;
}
let counts = [...btn].map(el => el = makeCounter());
 
const addProgress = (count, filling) => {
    let delta = count();
    if(delta > 90) return;
    filling.style.width = delta + 'px';};
btn.forEach((el, i) => el.addEventListener('click', () => addProgress(counts[i], progress[i])));

@malkovan · 22.10.2018, 23:26 **[ТС]**

Не парни, это круто конечно, но так не пойдёт)
Я же не код просил готовый, а указать куда идти)
Но зато стало понятно, что самостоятельно мне бы такое было не осилить.
А так, да, то что надо!
Я на момент создания темы написал такое:

HTML5
1
2
3
4
<button class="btn" onclick="btn1()">КНОПКА</button><br>
<button class="btn" onclick="btn1()">КНОПКА</button><br>
<button class="btn" onclick="btn1()">КНОПКА</button><br>
<button class="btn" onclick="btn1()">КНОПКА</button>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  background-color: #001;
  margin: 0;
}
 
.btn{
  background: #222;
    width: 100%;
    outline: none;
    height: 60px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

JavaScript
1
2
3
function btn1 () {
  alert ("ВСПЛЫВАЮЩЕЕ ОКНО")
};

Но я так понимаю, что такую кнопку как я сделал, не закрасить фрагментарно, только целиком.
Значит надо переделывать на контейнер DIV как на всех примерах сделано.

Qwerty_Wasd · 22.10.2018, 23:31

klopp, отличный варик, текст кнопок еще добавьте, и будет супер

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

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

Не парни, это круто конечно, но так не пойдёт)

ну Вы уж извините нас, я было спрятал под кат. Алгоритм расписал. А потом klopp присоединился.. ну и нас понесло

@AlexZaw · 23.10.2018, 10:07

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

Но я так понимаю, что такую кнопку как я сделал, не закрасить фрагментарно, только целиком.

Можно и такую кнопку частями закрасить. Просто нужно использовать linear-gradient и с помощью скрипта менять его координаты. Ну или, если нужно что-бы кнопка закрашивалась вместе с надписью, можно наложить на кнопку псевдоэлемент и при клике на кнопку увеличивать его ширину.

Qwerty_Wasd, приветсвую!

Qwerty_Wasd · 23.10.2018, 11:56

AlexZaw, здравствуй

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@malkovan 0 / 0 / 0 Регистрация: 21.10.2018 Сообщений: 4

	Сделать четыре кнопки, сегментировать их на 30 делений каждую. При нажатии кнопки закрашивался один её сегмент. 21.10.2018, 22:45. Показов 1628. Ответов 10 Метки нет (Все метки) Привет. Постигаю азы, спать/есть не могу, хочу быть среди тех кто умеет делать "матрицу")) Начитался разных самоучителей, каких-то в большей, каких-то в меньшей степени, но уже думаю в практике закрепление навыков будет существенно эффективнее. Задача такая: сделать четыре кнопки, сегментировать их на 30 делений каждую. Чтобы при нажатии кнопки закрашивался один её сегмент. (по типу как индикация зарядки акб на мобильнике, потихоньку символ батарейки закрашивается) И получится своеобразный счётчик нажатий на кнопку. При нажатии 30 раз, кнопка закрашивается полностью и к примеру становится не активной. На данный момент посредством HTML (тег BUTTON, без FORM) просто сделал пока кнопки. CSS создал нужный размер, положение и цвет (ещё не до конца). Вопрос. Подскажите в общих чертах, вектор дальнейшей работы, а реализовать я попробую на сколько хватит соображалки) Т.е. с чего начать и какой-то алгоритм работы такого счётчика. Подскажите, други?) 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	23.10.2018, 11:56
	AlexZaw, здравствуй 0

Сделать четыре кнопки, сегментировать их на 30 делений каждую. При нажатии кнопки закрашивался один её сегмент.

Решение