If hope this is not duplication to another question, I try to create website and use countdown timer to specific end date like countdown for wedding invitation website.
Here wedding.js
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock(){
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if(t.total<=0){
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock,1000);
}
var deadline = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);
and code to call countdown
<div id="clockdiv">
<span class="days"></span> Day
<span class="hours"></span> Hour
<span class="minutes"></span> Minute
<span class="seconds"></span> Second
</div>
Work fine if use external js call wedding.js , but i need to include some php code so i try to convert it to inline javascript like this
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script>
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock(){
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if(t.total<=0){
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock,1000);
}
var deadline = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="blocks">
<!-- start countdown -->
<div class="fic">
<div id="clockdiv">
<span class="days"></span> Day<br/>
<span class="hours"></span> Hour<br/>
<span class="minutes"></span><br/>
<span class="seconds"></span>
</div>
</div>
<!-- end countdown -->
</div>
</div>
</div>
</div>
</body>
</html>
but html show nothing, need help to fix this inline javascript code