77 lines
1.8 KiB
HTML
77 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>beer</title>
|
|
<style>
|
|
blink, .blink {
|
|
-webkit-animation: blink 1s step-end infinite;
|
|
-moz-animation: blink 1s step-end infinite;
|
|
-o-animation: blink 1s step-end infinite;
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
@-webkit-keyframes blink {
|
|
67% { opacity: 0 }
|
|
}
|
|
|
|
@-moz-keyframes blink {
|
|
67% { opacity: 0 }
|
|
}
|
|
|
|
@-o-keyframes blink {
|
|
67% { opacity: 0 }
|
|
}
|
|
|
|
@keyframes blink {
|
|
67% { opacity: 0 }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Display the countdown timer in an element -->
|
|
<p id="demo"></p>
|
|
|
|
<script>
|
|
(function() {
|
|
var blinks = document.getElementsByTagName('blink');
|
|
var visibility = 'hidden';
|
|
window.setInterval(function() {
|
|
for (var i = blinks.length - 1; i >= 0; i--) {
|
|
blinks[i].style.visibility = visibility;
|
|
}
|
|
visibility = (visibility === 'visible') ? 'hidden' : 'visible';
|
|
}, 250);
|
|
})();
|
|
</script>
|
|
<script>
|
|
// Update the count down every 1 second
|
|
|
|
var x = setInterval(function() {
|
|
|
|
// Get today's date and time
|
|
// var now = new Date().getTime();
|
|
var now = new Date().getTime();
|
|
var today = new Date();
|
|
today.setHours( {{ hours }}, {{ minutes }});
|
|
var goal = today.getTime();
|
|
|
|
// Find the distance between now and the count down date
|
|
var distance = goal - now;
|
|
|
|
// Time calculations for days, hours, minutes and seconds
|
|
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
// Display the result in the element with id="demo"
|
|
document.getElementById("demo").innerHTML = hours + "h "
|
|
+ minutes + "m ";
|
|
|
|
// If the count down is finished, write some text
|
|
if (distance < 0) {
|
|
clearInterval(x);
|
|
document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>";
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|