Сделать четыре кнопки, сегментировать их на 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, здравствуй

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

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

	Сделать четыре кнопки, сегментировать их на 30 делений каждую. При нажатии кнопки закрашивался один её сегмент. 21.10.2018, 22:45. Показов 1654. Ответов 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 делений каждую. При нажатии кнопки закрашивался один её сегмент.

Решение