Last active
November 16, 2018 00:49
-
-
Save wichaksono/ce7b4eaf2ab0e976e492aba44bef14bf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Sample Countdown Timer JS PHP | |
*/ | |
$date_start = '10-10-2018 20:40:00'; | |
$date_end = '11-10-2018 20:40:00'; | |
$dateStart = new Datetime($date_start); | |
$dateEnd = new Datetime($date_end); | |
$interval = $dateStart->diff($dateEnd); | |
// var_dump( $intervale ); | |
?> | |
<html> | |
<head> | |
<title>Countdown Timer</title> | |
</head> | |
<body> | |
<table> | |
<tr> | |
<td class="days"><?php echo $interval->d;?></td> | |
<td class="hours"><?php echo $interval->h;?></td> | |
<td class="minutes"><?php echo $interval->i;?></td> | |
<td class="seconds"><?php echo $interval->s;?></td> | |
</tr> | |
</table> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script> | |
var timer; | |
var seconds_el = $('.text-seconds'); | |
var minutes_el = $('.text-minutes'); | |
var hours_el = $('.text-hours'); | |
var days_el = $('.text-days'); | |
// ambil nilai | |
var hours = hours_el.text(); | |
var minutes = minutes_el.text(); | |
var seconds = seconds_el.text(); | |
var days = days_el.text(); | |
timer = setInterval(function() { | |
if ( seconds == 0 ) { | |
if ( minutes == 0 ) { | |
if ( hours == 0 ) { | |
if ( days == 0 ) { | |
alert('time out'); | |
clearInterval(timer); | |
} else { | |
days--; | |
hours=23; | |
minutes=59; | |
seconds=59 | |
} | |
} else { | |
hours--; | |
minutes=59; | |
seconds=59 | |
} | |
} else { | |
minutes--; | |
seconds = 59; | |
} | |
} else { | |
seconds--; | |
} | |
days_el.text(("0" + days).slice(-2) ); | |
hours_el.text(("0" + hours).slice(-2) ); | |
minutes_el.text(("0" + minutes).slice(-2)); | |
seconds_el.text(("0" + seconds).slice(-2)); | |
}, 1000); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment