@dranets13

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

Чтобы например 15 минут выглядели так joxi.ru/GrqzYG1fQvBbGm, полчаса - это половина закрашенной окружности и так далее, интервалы по 10 минут.
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 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
Похожие вопросы