@dranets13

Как на html+css сделать окружность, которую в зависимости от времени можно закрашивать используя js?

Чтобы например 15 минут выглядели так joxi.ru/GrqzYG1fQvBbGm, полчаса - это половина закрашенной окружности и так далее, интервалы по 10 минут.
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 2
@daniil14056
Не понял вопрос, но можно
А уже интервалы и способ описания изменения цветов, нужно самому описать
<div id="circle" style="width:100px; height:100px; border-radius:50px; background-color:RGB(255,0,0)"></div>
<script>
(function(){
       var div=document.getElementById("circle");
       var lastR=255;
        var lastG=0;
       var lastB =0;
       setInterval(()=>{
               div.style.backgroundColor="RGB("+lastR+","+lastG+","+lastB+")";
               if(lastG<255)
               	lastG++;
               else
               	lastG=0;
               if(lastG<255){
               	lastB++;
               }
               else 
               	lastB=0; 
           },100);
   })();
</script>
Ответ написан
drymind404
@drymind404
front-end разработчик
Ссылка из вашего вопроса не работает. Но если я правильно понял, почему не использовать, например, градиент? Если 2 цвета, меняете в 2-х местах проценты, и меняется степень заливки:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(to top, red 0%, red 25%, black 25%, black 100%);
}


Исходя из того, как вы хотите менять степень закрашенности, можно, например, сделать так:

var progress = 10; // допустим, это прошедшие минуты, полученные из бд
var percent = Math.round(progress/60 * 100); // минуты в процентах от часа
var circle = document.getElementsByClassName('circle')[0]; // собственно, наш круг
circle.style.backgroundImage = "linear-gradient(to top, red 0%, red " + percent + "%, black " + percent + "%, black 100%)";


P.S. Только сейчас заметил, что у вас запятая влилась в ссылку, поэтому у меня она не работала) Увидел как вам надо. Сразу не приходит идея как реализовать это ручками) Но, вероятно, есть готовые решения. Окружность с 4 ступенями заливки можно сделать с помощью обычных border'ов, так, например:

.circle { 
  border-radius: 50%;
  border: 50px solid transparent;
  border-right-color: black;
  width: 0;
  height: 0;
  transform: rotate(-45deg);
}


Но с 6 - реализация явно намного сложнее и, скорее всего, не без js. Если хотите чтобы было в 6 ступеней, ищите готовые решения)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
21 окт. 2018, в 12:15
100000 руб./за проект
21 окт. 2018, в 09:51
12000 руб./за проект
21 окт. 2018, в 02:06
500 руб./в час