2

Есть обычный таймер:

function update() {
     var Now = new Date(), Finish = new Date();
     Finish.setHours( 23);
     Finish.setMinutes( 59);
     Finish.setSeconds( 59);
     if( Now.getHours() === 23  &&  Now.getMinute() === 59  &&  Now.getSeconds === 59) {
      Finish.setDate( Finish.getDate() + 1);
     }
     var sec = Math.floor( ( Finish.getTime() - Now.getTime()) / 1000);
     var hrs = Math.floor( sec / 3600);
     sec -= hrs * 3600;
     var min = Math.floor( sec / 60);
     sec -= min * 60;
     $(".timer .hours").text( pad(hrs));
     $(".timer .minutes").text( pad(min));
     $(".timer .seconds").text( pad(sec));
     setTimeout( update, 200);
    }
    function pad(s) { return ('00'+s).substr(-2) }
    update();
.timer {
  width: 320px;
 height: 55px;
}

.timer .timer_item {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 float: left;
  padding: 13px 0 0 0;
 width: 98px;
 height: 55px;
 background: #e53621;
 font-size: 13px;
 line-height: 15px;
 color: #fff;
 text-align: center;
}


.timer .timer_item:nth-child(2) {
 margin: 0 13px;
 position: relative;
}


.timer .timer_item span {
  font-size: 28px;
}


.timer .timer_item:nth-child(2):before, 
.timer .timer_item:nth-child(2):after {
 display: block;
 content: ":";
 width: 13px;
  height: 55px;
 font-size: 28px;
 line-height: 51px;
 color: #222;
 position: absolute;
 top: 0;
}


.timer .timer_item:nth-child(2):before {
 left: -13px;
}


.timer .timer_item:nth-child(2):after {
 right: -13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">
                    <div class="timer_item"><span class="hours">00</span><br>часов</div>
                    <div class="timer_item"><span class="minutes">00</span><br>минут</div>
                    <div class="timer_item"><span class="seconds">00</span><br>секунд</div>
                </div>

Как сделать окружность вокруг часов/минут/секунд, которая уменьшается при уменьшении времени таймера?

введите сюда описание изображения

Frontender
  • 2,615
  • 1
    Есть несколько способов. Можно через background:linear-gradient, но в основном такое делают на canvas – user190134 Mar 28 '17 at 02:23
  • Нужна поддержка старых браузеров от IE8. Он поддерживает canvas? – Frontender Mar 28 '17 at 02:26
  • Точно не скажу, но по данным caniuse - нет. http://caniuse.com/#search=canvas – user190134 Mar 28 '17 at 02:51

0 Answers0