Sanjeev K Sanjeev K - 20 days ago 4
HTML Question

How to reverse countdown timer -Javascript

I have a script working for countdown timer here, [JSfiddle demo]

In the above countdown timer, I have set a future date on which the event will begin, that is november 13, 2016 10:00:00 and once the time is complete it will it will show zero, and from that time event will start for next 3 hrs, so I want to show that when the timer is complete and reached to event time then its showing the counter value with minus, but I want to show that event has started and certain has been passed.

Can somebody please suggest a trick how to display the next timer as I mentioned above?



if (document.getElementById('count_down_timer').getAttribute('data-browser') === "modern") {
var current_date = new Date();
var event_date = new Date(document.getElementsByClassName('clock')[0].getAttribute('data-event'));
var date_diff = Math.abs(current_date.getTime() - event_date.getTime());
var units = ['day', 'hrs', 'min', 'sec'];

function count_down(time) {
"use strict";
var temp_time = time / 1000;
var sec = temp_time % 60;
temp_time /= 60;
var min = temp_time % 60;
temp_time /= 60;
var hrs = temp_time % 24;
temp_time /= 24;
var days = temp_time;
return [days, hrs, min, sec];
}

function update_countdown(date) {
"use strict";
var current = count_down(date);
for (var i = 0; i < units.length; i++) {
if (i !== 0) {
document.getElementsByClassName(units[i] + '_top_val')[0].innerHTML = ('0' + Math.floor(current[i])).slice(-2);
document.getElementsByClassName(units[i] + '_btm_val')[0].innerHTML = ('0' + Math.floor(current[i])).slice(-2);
} else {
document.getElementsByClassName(units[i] + '_top_val')[0].innerHTML = Math.floor(current[i]);
document.getElementsByClassName(units[i] + '_btm_val')[0].innerHTML = Math.floor(current[i]);
}
}

var remaining = count_down(date - 1000);
for (var j = 0; j < units.length; j++) {
if (Math.floor(current[j]) !== Math.floor(remaining[j])) {
animate_numbers(units[j], Math.floor(remaining[j]));
}
}
}

function animate_numbers(unit, value) {
"use strict";
var elem_digit = document.getElementsByClassName(unit)[0];
var elem_btm = document.getElementsByClassName(unit + '_btm_val')[0];
var elem_top = document.getElementsByClassName(unit + '_top_val')[0];
var elem_next_btm = document.getElementsByClassName('next_' + unit + '_btm_val')[0];
var elem_next_top = document.getElementsByClassName('next_' + unit + '_top_val')[0];

if (unit === 'day' || unit === 'hrs' || unit === 'min') {
elem_digit.classList.remove('still');
setTimeout(function() {
elem_digit.classList.add('still');
}, 1000);
}

if (unit !== 'day') {
elem_next_top.innerHTML = elem_next_btm.innerHTML = ('0' + Math.floor(value)).slice(-2);
} else {
elem_next_top.innerHTML = elem_next_btm.innerHTML = ('0' + Math.floor(value)).slice(-2);
}
elem_btm.classList.remove("flip1");
elem_top.offsetHeight;
elem_btm.classList.add("flip1");
elem_next_btm.classList.remove("flip2");
elem_next_top.offsetHeight;
elem_next_btm.classList.add("flip2");
}
update_countdown(date_diff);
document.getElementsByClassName('sec')[0].classList.remove('still');
setInterval(function() {
"use strict";
date_diff -= 1000;
update_countdown(date_diff);
}, 1000);
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:700');
.ie9-hide {
display: none;
visibility: none;
}
.clock-wrapper {
width: 280px;
margin: auto;
overflow: hidden;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight:700;
overflow: hidden;
}
.clock {
height: 105px;
margin-left: 4px;
text-align: center;
text-align: center;
}
.clock-elem {
-webkit-perspective: 300px;
perspective: 300px;
display: inline-block;
float: left;
width: 64px;
height: 76px;
position: relative;
margin: 0 2px;
}
.clock-elem div {
-webkit-perspective: 300px;
perspective: 300px;
color: #264B3A;
text-align: center;
font-weight: normal;
font-size: 44px;
line-height: 76px;
text-transform: lowercase;
color: #fff;
border-radius:3px;
}

.clock .top {
position: relative;
height: 100%;
overflow: hidden;
background: #264B3A;
background-image: -webkit-linear-gradient(rgba(86, 146, 46, 0), #264B3A);
background-image: linear-gradient(rgba(86, 146, 46, 0), #264B3A);
}
.clock .top:before{height:1px; background:rgba(255,255,255,0.3); content:""; top:50%; position:absolute; left:0; width:100%;}

.clock .btm {
position: relative;
z-index: 4;
top: -76px;
height: 50%;
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-origin: bottom;
-ms-transform-origin: bottom;
transform-origin: bottom;
overflow: hidden;
background-color: #264B3A;
background-image: -webkit-linear-gradient(rgba(86, 146, 46, 0), #264B3A);
background-image: linear-gradient(rgba(86, 146, 46, 0), #264B3A);
}
.clock .next {
position: relative;
overflow: hidden;
z-index: 2;
top: -114px;
height: 50%;
background-color: #264B3A;
}
.clock .unit {
position: relative;
top: -120px
}
.clock-elem:not(.still) .unit:after {
content: '';
display: block;
height: 38px;
width: 100%;
position: absolute;
top: -48px;
background-image: -webkit-linear-gradient(rgba(86, 146, 46, 0), #264B3A);
background-image: linear-gradient(rgba(86, 146, 46, 0), #264B3A);
-webkit-animation: backfade 1s ease-in infinite;
animation: backfade 1s ease-in infinite;
}
.clock .next_top {
position: relative;
overflow: hidden;
z-index: 1;
top: -114px;
height: 50%;
line-height: 0;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
}
.clock .flip1 {
-webkit-animation: flip1 ease-in 1;
animation: flip1 ease-in 1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.clock .flip2 {
-webkit-animation: flip2 ease-in 1;
animation: flip2 ease-in 1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.clock-elem.still div {
-webkit-transform: none;
-ms-transform: none;
transform: none;
background: #264B3A;
color: #fff;
}
.clock-elem.still .next_top {
z-index: -3;
}
@-webkit-keyframes flip1 {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #264B3A;
}

50% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: #4a7e28;
}

100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: #4a7e28;
}
}
@keyframes flip1 {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #264B3A;
}

50% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: #4a7e28;
}

100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
background-color: #4a7e28;
}
}
@-webkit-keyframes flip2 {
0% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}

50% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
background-color: #264B3A;
}

100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #264B3A;
}
}
@keyframes flip2 {
0% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}

50% {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
background-color: #264B3A;
}

100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-color: #264B3A;
}
}
@-webkit-keyframes backfade {
0% {
background-color: #264B3A;
}

40% {
background-color: #264B3A;
}

100% {
background-color: black;
}
}
@keyframes backfade {
0% {
background-color: rgba(86, 146, 46, 0);
}

60% {
background-color: rgba(86, 146, 46, 0.9);
}

100% {
background: rgba(86, 146, 46, 0);
}
}

<!--[if IE 9]>
<div class="clock-wrapper ie9-hide" id="count_down_timer" data-browser="ie9">
<![endif]-->
<div class="clock-wrapper" id="count_down_timer" data-browser="modern">
<div id="reflow_trigger"></div>
<div class="clock" data-event="november 12, 2016 12:00:00">
<div class="clock-elem day still" style="display:none;">
<div class="day_top_val top"></div>
<div class="day_btm_val btm"></div>
<div class="next_day_top_val next"></div>
<div class="next_day_btm_val next_top"></div>
<p class="unit">days</p>
</div>
<div class="clock-elem hrs still">
<div class="hrs_top_val top"></div>
<div class="hrs_btm_val btm"></div>
<div class="next_hrs_top_val next"></div>
<div class="next_hrs_btm_val next_top"></div>
<p class="unit">HH</p>
</div>
<div class="clock-elem min still">
<div class="min_top_val top"></div>
<div class="min_btm_val btm"></div>
<div class="next_min_top_val next"></div>
<div class="next_min_btm_val next_top"></div>
<p class="unit">MM</p>
</div>
<div class="clock-elem sec still">
<div class="sec_top_val top"></div>
<div class="sec_btm_val btm flip1"></div>
<div class="next_sec_top_val next"></div>
<div class="next_sec_btm_val flip2 next_top"></div>
<p class="unit">SS</p>
</div>
</div>
</div>
<!--[if IE 9]>
</div>
<![endif]-->




Answer

In the setInterval, update the code with following code:

setInterval(function() {
        "use strict";
        date_diff += 1000;
        update_countdown(date_diff);
      }, 1000);

And then change the date and time in HTML code (Make sure you are entering the previous date.)

It should work, give a try

Comments