Countdown Timer for use in Liferay 7.*

Created: 24 February 2021  Modified:

Countdown timer for use in Liferay 7.*. Requires Bootstrap 3 and JQuery which are part of this version of Liferay.{.btn-read-more}

{.btn-read-more}

<style>
  #countdownHolderAll {
    position: relative;
    background-color: white;
    color: black;
    border-radius: 25px;    
  }

  .countdownTimeunit {
    font-size: 2em;
    float: left;
    padding: .5em;
    border-width: .1em;
    border-style: solid;
    margin: .2em;
    border-radius: 25px;
    width: 2.5em;
    text-align: center;
  }
  
  .countdownTimeUnitText {
    font-size: .75em;  
  }
  
  #countdownFooterHolder {
    font-size: 2em;
    text-align: center;
  }  
</style>
<div id="countdownHolderAll" class="container">

  <div class="row">
      <div id="countdownDaysHolder" class="col countdownTimeunit">
          <span id="countdownDaysText"></span>
          <div id="coundownDaysTextHolder" class="countdownTimeUnitText">
            Days        
          </div>    
      </div>
      <div id="countdownHoursHolder" class="col countdownTimeunit">
          <span id="countdownHoursText"></span>
          <div id="countdownHoursTextHolder" class="countdownTimeUnitText">
            Hours        
          </div>    
      </div>
      <div id="countdownMinutesHolder" class="col countdownTimeunit">
          <span id="countdownMinutesText"></span>
          <div id="countdownDaysTextHolder" class="countdownTimeUnitText">
            Minutes        
          </div>    
      </div>
      <div id="countdownSecondsHolder" class="col countdownTimeunit">
          <span id="countdownSecondsText"></span>
          <div id="countdownDaysTextHolder" class="countdownTimeUnitText">
            Seconds        
          </div>    
      </div>
  </div>
  <div class="row">
    <div id="countdownFooterHolder" class="col countdownText">
      remaining until time is out.
    </div
  </div>    
</div>
<script type="text/javascript">
  var second = 1000;
  var minute = 60 * second;
  var hour = 60 * minute;
  var day = 24 * hour;

  function updateCountdown() {         
          //This should be the date and time in UTC/GMT
	  var deadlineDate = new Date(2021,02,14);
          var timezoneOffset = deadlineDate.getTimezoneOffset();
	  var deadlineTime = deadlineDate.getTime() + timezoneOffset;
	  
	  var currentDate = new Date();
	  var currentTime = currentDate.getTime() + timezoneOffset;
	  
	  var differenceDays = 0;
	  var differenceHours = 0;
	  var differenceMinutes = 0;
	  var differenceSeconds = 0;
	  
	  
	  if(deadlineTime > currentTime) {
	    var differenceTime = deadlineTime - currentTime;
	    if(differenceTime > day) {
	      differenceDays = Math.floor(differenceTime / day);
	      differenceTime = differenceTime - (differenceDays * day);
	    }
	    if(differenceTime > hour) {
	      differenceHours = Math.floor(differenceTime / hour);
	      differenceTime = differenceTime - (differenceHours * hour);
	    }
	    if(differenceTime > minute) {
	      differenceMinutes = Math.floor(differenceTime / minute);
	      differenceTime = differenceTime - (differenceMinutes * minute);
	    }
	    if(differenceTime > second) {
	      differenceSeconds = Math.round(differenceTime / second);
	    }
	  }
	  
	  $('#countdownHolderAll #countdownDaysText').html('' + differenceDays);
	  $('#countdownHolderAll #countdownHoursText').html('' + differenceHours);
	  $('#countdownHolderAll #countdownMinutesText').html('' + differenceMinutes);
  	  $('#countdownHolderAll #countdownSecondsText').html('' + differenceSeconds);
  }
 
  $(document).ready(function() {
    updateCountdown();
    setInterval(updateCountdown, second);
  });
  
</script>
tags: liferay - countdown - timer - countdown timer - bootstrap - jquery - javascript
   Less Is More