Created
November 16, 2018 00:52
-
-
Save wichaksono/ad1a233a0753a2c8967cb32abf6d7953 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 ); | |
// ubah ke dua digit | |
function two_digit($string) | |
{ | |
return sprintf('%02d', $string); | |
} | |
?> | |
<html> | |
<head> | |
<title>Countdown Timer</title> | |
</head> | |
<body> | |
<table> | |
<tr> | |
<td class="days"><?php echo two_digit($interval->d);?></td> | |
<td class="hours"><?php echo two_digit($interval->h);?></td> | |
<td class="minutes"><?php echo two_digit($interval->i);?></td> | |
<td class="seconds"><?php echo two_digit($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