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>