Skip to content

Instantly share code, notes, and snippets.

@noahub
Last active Aug 1, 2021
Embed
What would you like to do?
Add A countdown timer to your landing page
<style>
.done {color: tomato !important;}
</style>
<script>
var startTime = 0.25; //set countdown in Minutes
var doneClass = "done"; //optional styling when timer is done
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalLoop = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
for(var i=0;i<display.length;i++){
display[i].textContent = minutes + ":" + seconds;
}
if (--timer < 0) {
for(var i=0;i<display.length;i++){
display[i].classList.add(doneClass);
display[i].textContent = "DONE";
}
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function () {
var setMinutes = 60 * startTime,
display = document.querySelectorAll(".timer");
startTimer(setMinutes, display);
};
</script>
@fk-7pkonzepte

This comment has been minimized.

Copy link

@fk-7pkonzepte fk-7pkonzepte commented Mar 20, 2020

<script>	
  (function(document) {
    var cssClassDone = 'done';
    //var textDone = '00:00:00:00';
    var textDone = 'done';
    var countDownDate = '2020.03.21 15:37:25'
    
    function pad(input) {
        return input < 10 ? '0' + input : input;
    }
  
    function startTimer(nodes) {
      var distance, days, hours, minutes, seconds, output, dstData = new Date(countDownDate).getTime();
      var interval = setInterval(function () {
        distance = (dstData - (new Date()).getTime()) /1000;
        days = Math.floor(distance / 86400);
        hours = Math.floor((distance % 86400) / 3600);
        minutes = Math.floor((distance % 3600) / 60);
        seconds = Math.floor(distance % 60);
        output = pad(days) + ':' + pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
    
        for(var i=0, m=nodes.length;i<m;i++){
          nodes[i].textContent = output;
        }
        if (distance < 0) {
          clearInterval(interval);
          for(var i=0;i<nodes.length;i++){
            nodes[i].classList.add(cssClassDone);
            nodes[i].textContent = textDone;
          }
        }
      }, 1000);
    }
  
    window.onload = function () {
       startTimer(document.querySelectorAll('.timer'));
    };
  })(document);
  
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment