Такое делают на HTML?

[malkovan]

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

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

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

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

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

Edited October 21, 2018 by malkovan

[chocolate_moles]

Например

https://jsfiddle.net/8cu346x7/1/

[npofopr]

Никак

Считать вам всё равно с js надо

[AlexZaw]

3 часа назад, npofopr сказал:

Никак

Считать вам всё равно с js надо

Ну почему же никак? Можно и на чистом css это сделать, правда придется 30 кнопок делать, но такой функционал вполне себе реализуем.

Пример на три позиции:

живой пример:

See the Pen ReBjPo by Alexandr (@AlexZaw) on CodePen.

код

<div id="wrap">
  <input id='i1' type="checkbox">
    <label for="i1" class='l1'></label>
  
  <input id='i2' type="checkbox">
  <label for="i2" class='l2'></label>
  
  <input id='i3' type="checkbox">
  <label for="i3" class='l3'></label>
 
  <input id='i4' type="checkbox">
  <label for="i4" class='l4'></label>

</div>
<button id='reset'>reset</button>

#wrap {
  position: relative;
}

button {
  margin-top: 50px;
}

input {
  display: none;
}

input:checked + label + input + label {
  display: block;
}

label {
  width: 100px;
  border: 1px solid #000;
  display: inline-block;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

label:not(:nth-of-type(1)) {
  display: none;
}

label:after {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  content: "";
}

.l2:after {
  width: 33%;
  background: #f00;
}

.l3:after {
  width: 66%;
  background: #ff0;
}

.l4:after {
  width: 100%;
  background: #0f0;
}

reset.onclick=function() {
 var inputs = wrap.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++){
    inputs[i].checked = false;
  }
}

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

[npofopr]

2 часа назад, AlexZaw сказал:

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

type=''reset" можно было использовать 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

А так да. Вполне себе решение)