• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Таймер обратного отсчета на CSS и Javascript (Красивый таймер обратного отчета при клике по кнопке)
Таймер обратного отсчета на CSS и Javascript
Kosten
Понедельник, 21 Декабря 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Таймеры обратного отсчета можно задействовать в множество применений в сети интернете, где безусловно наиболее распространенные из где вы найдете на веб-сайтах с продуктами или услугами, которые еще не запущены, с таймером обратного отсчета, отображающим время до запуска их продукта или услуги.

Ведь по функциональности они полезны, так как посетители точно знают, сколько еще осталось времени ожидания. Альтернативные распространенные варианты использования таймера обратного отсчета — это предстоящие праздники, мероприятия, конференции.



HTML

Код
<div class="container">
    <div id="pm">
  <input type="button" id="plus" value="">
  <input type="button" id="minus" value="">
    </div>
    <p id="result">30</p>
    <p id="sec">sec</p>
    <canvas id="progress" width="200" height="200"></canvas><!-- progress bar -->
</div>
<div class="buttons">
    <input type="button" id="start" value="Start">
    <input type="button" id="stop" value="Stop">
</div>

CSS

Код
/* Font Awesome */
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/* Roboto Condensed */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

.container {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #3B3A3F;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

#progress {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 1s ease-in-out;
}

p {
    margin: 0;
    color: #00CE9B;
    font-weight: 700;
}

#result {
    padding: 60px 0 0;
    font-size: 80px;
    line-height: 60px;
}

#sec {
    font-size: 28px;
}

#start, #stop {
    position: relative;
    width: 100px;
    height: 40px;
    outline: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
}

#start {
    background: #4897F0;
}

#start:hover {
    background: #4087d8;
}

#stop {
    background: #00CE9B;
}

#stop:hover {
    background: #00b98b;
}

#start:active, #stop:active {
    top: 1px;
}

#plus {
    width: 100%;
    padding: 0;
    outline: 0;
    border: 0;
    color: #aaa;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-family: FontAwesome, sans-serif;
}

#minus {
    width: 100%;
    padding: 0;
    outline: 0;
    border: 0;
    color: #aaa;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-family: FontAwesome, sans-serif;
    
}

#pm {
  position: absolute;
  top: 70px;
  left: 20px;
  opacity: .1;
  z-index: 9999;
}

.container:hover > #pm {
  opacity: 1;
}

.buttons {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

JS

Код
var timer, stopTimer,
    result = document.getElementById('result'),
    sec    = document.getElementById('sec'),
    start  = document.getElementById('start'),
    stop   = document.getElementById('stop'),
    plus   = document.getElementById('plus'),
    minus  = document.getElementById('minus'),
    n      = +result.innerHTML;
    
// events
start.addEventListener('click', function() {
    startTimer(n);
}, false);

stop.addEventListener('click', function() {
    stopTimer();
}, false);

plus.addEventListener('click', function() {
    result.innerHTML = ++n;
}, false);

minus.addEventListener('click', function() {
    result.innerHTML = --n;
}, false);

// functions
function startTimer(n) {
    var i = n-1; // fix 1 sec start delay
  document.getElementById('pm').style.display = 'none'; // hide arrows

    timer = setInterval( function() {
  result.innerHTML = i--;
     
     stopTimer = function() {
       clearInterval(timer);
       result.innerHTML = i + 1;
     }
  
     if (i < 5) {
   result.style.color = '#ED3E42';
   sec.style.color = '#ED3E42';
  } // hurry up!
  
  if (i < 0) { stopTimer(); } // finish
  
  function updateProgress() {
   var canvas = document.getElementById('progress');
   var context = canvas.getContext('2d');
   var centerX = canvas.width / 2;
   var centerY = canvas.height / 2;
   var radius = 80;
   var circ = Math.PI * 2; // 360deg
   var percent = i / n; // i%
   context.beginPath();
   context.arc(centerX, centerY, radius, ((circ) * percent), circ, false);
   context.lineWidth = 10;
   if (i < 5) {
    context.strokeStyle = '#ED3E42';
   } else {
    context.strokeStyle = '#00CE9B';
   }
   context.stroke();
  } // progress
  
  updateProgress();
    
    }, 1000); // every sec

}

На этом установка завершена.

Демонстрация
Прикрепления: 9539357.png (16.9 Kb) · timer.zip (4.9 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Таймер обратного отсчета на CSS и Javascript (Красивый таймер обратного отчета при клике по кнопке)
  • Страница 1 из 1
  • 1
Поиск: