× Got a CSS, HTML or webdesign question? Ask it here!

Countdown timer example

3 weeks 2 days ago #20973 by ccruz
We get a few requests asking for a countdown timer widget however we don't currently have one other than the one present on campaign sites. It's possible to add a custom one using the HTML widget though, here's an example HTML, CSS and javascript snippet that some of you might find useful.

You would need to edit the few lines at the top relating to colors, timer date and a timer end message.

<p id="count-down-timer"></p>
<style>
/* Set the color of your counter box outlines, timer box background color */
.dn-campaign-progress-time .dn-campaign-time {
    border-color: red;
    background-color: white;
}
/* Set the color of your counter text */
#count-down-timer, .dn-campaign-progress-time .dn-campaign-time p {
    color: red;
}
</style>
<script>
// Set the date we're counting down to
var countDownDate = new Date("May 28, 2018 12:00:00").getTime();
  
// Set the message to display when countdown ends
var countDownMessage = "STORE SALES ENDED";

  
  
  
  
  
// DO NOT EDIT BELOW THIS LINE
var countDateTimer = setInterval(function() {
    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    var counDownHTML = '\
<div class="dn-campaign-progress-time">\
    <div class="dn-campaign-time">\
      <p id="camp_days" class="dn-number"> ' + days + ' </p>\
      <p>Days</p>\
    </div>\
    <div class="dn-campaign-time">\
      <p id="camp_hours" class="dn-number"> ' + hours + ' </p>\
      <p>Hours</p>\
    </div>\
    <div class="dn-campaign-time">\
      <p id="camp_minutes" class="dn-number"> ' + minutes + ' </p>\
      <p>Minutes</p>\
    </div>\
    <div class="dn-campaign-time">\
      <p id="camp_seconds" class="dn-number"> ' + seconds + ' </p>\
      <p>Seconds</p>\
    </div>\
</div>';
    
    if (distance < 0) {
        clearInterval(countDateTimer);
        document.getElementById("count-down-timer").setAttribute("style","font-size: 3em; font-weight: bold;");
        document.getElementById("count-down-timer").innerHTML = countDownMessage;
    } else {
        document.getElementById("count-down-timer").innerHTML = counDownHTML;
    }
}, 1000);
</script>
<style>
#count-down-timer {
	margin: 0;
    padding: 5px;
    text-align: center;
}
  
.dn-campaign-progress-time {
    margin: 0;
    width: 100%;
    text-align: center;
}

.dn-campaign-progress-time .dn-campaign-time {
    display: inline-block;
    border-radius: 5px;
    width: 22%;
    margin: 0 2px;
    box-sizing: border-box;
    padding: 5px;
    border-width: 2px;
    border-style: solid;
}

.dn-campaign-progress-time .dn-campaign-time p {
    text-align: center;
    margin-bottom: 0px;
}

.dn-campaign-progress-time .dn-campaign-time p.dn-number {
    padding: 0;
    font-size: 3em;
    font-weight: bold;
}
</style>

Looks like this:


-Cris
Attachments:
The following user(s) said Thank You: gregp

Please Log in or Create an account to join the conversation.

Time to create page: 0.457 seconds
Powered by Kunena Forum