js file :
function countdown(endT,callback) {
var days,hours,minutes,sec,timer;
end = new Date(endT);
end = end.getTime(); //Get initial Date in Milliseconds,
if (isNaN(end)) {
alert('@ countdown.js @ "Invalid Date", valid format- mm/dd/yyyy hh:mm:ss TT ');
return;
}
timer = setInterval(calculate,1000);//Timer to calculate remaining time
function calculate(){
var current = new Date();
var remaining = parseInt((end - current.getTime())/1000);//remaining seconds,
if (remaining <= 0){
clearInterval(timer);
days=0;
hours=0;
minutes=0;
sec=0;
display(days,hours,minutes,sec);
if (typeof callback === 'function' ) {
callback();
}
}else{
days = parseInt(remaining/86400);
remaining = (remaining%86400);
hours = parseInt(remaining/3600);
remaining = (remaining%3600);
minutes = parseInt(remaining/60);
remaining = (remaining%60);
sec = parseInt(remaining);
display(days,hours,minutes,sec);
}
}
//Function For displaying Results in HTML page with specific ID's
function display(days,hours,minutes,sec) {
var dl = days.toString().length;
if (dl == "1") {
sl = 2;
}else{
if (isNaN(dl)) {
sl = 3;
}
sl = dl;
}
document.getElementById("days").innerHTML = ("00"+days).slice(-sl);
document.getElementById("hours").innerHTML = ("0"+hours).slice(-2);
document.getElementById("minutes").innerHTML = ("0"+minutes).slice(-2);
document.getElementById("seconds").innerHTML = ("0"+sec).slice(-2);
}
}index.php :
<script src="countdown.js"></script>
<script>
countdown('08/26/2016 09:07:13 PM',callback); // Date format ('MM/DD/YYYY HH:MM:SS TT');find me!!!! */
};
</script>
<div class="countDown">
<span id="days">00</span> <!-- Remaining Days,id="days"-->
<span id="hours">00</span> <!-- Remaining hours ,id="hours"-->
<span id="minutes">00</span> <!-- Remaining minutes,id="minutes"-->
<span id="seconds">00</span> <!-- Remaining secounds,id="secounds"-->
</div>
<Style>
.countDown{
display: inline-block;
margin: auto;
}
.countDown span{
display: block;
background: #000;
color: #fff;
height: 54px;
float: left;
margin-right: 5px;
padding: 8px;
border-radius: 5px;
font-size: 45px;
line-height:normal;
text-align: center;
box-shadow: 2px 2px 8px #747474;
background-image: ./images/clock_bag.PNG; /*If You want image background*/
background-size: contain; /*If You want image background*/
background-repeat: repeat-x; /*If You want image background*/
}
#days:after,#hours:after,#minutes:after,#seconds:after{
font-size: 14px;
line-height:normal;
display: block;
width: inherit;
margin-top: 10px;
color: #5C5757;
text-align: center;
}
#days:after{
content: "Days";
}
#minutes:after{
content: "Minutes";
}
#hours:after{
content: "Hours";
}
#seconds:after{
content: "Seconds";
}
</style>basically what im trying to do is the last hour change the background-image: ./images/clock_bag.PNG; so it will be a red image
Any help would be appreciated
Thank you .
