beer/templates/beer.html

78 lines
1.8 KiB
HTML
Raw Normal View History

2020-02-14 09:29:39 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>beer</title>
2020-02-14 17:12:12 +01:00
<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>
2020-02-14 09:29:39 +01:00
</head>
<body>
2020-02-14 00:58:44 +01:00
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
2020-02-15 13:04:32 +01:00
<script>
2020-02-14 17:12:12 +01:00
(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>
2020-02-14 00:58:44 +01:00
<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();
2020-02-20 02:23:04 +01:00
today.setHours( {{ hours }}, {{ minutes }});
2020-02-14 00:58:44 +01:00
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);
2020-02-14 17:12:12 +01:00
document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>";
2020-02-14 00:58:44 +01:00
}
}, 1000);
</script>
2020-02-14 09:29:39 +01:00
</body>
</html>