81 lines
2 KiB
HTML
81 lines
2 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>
|
|
|
|
const changeFavicon = link => {
|
|
let $favicon = document.querySelector('link[rel="icon"]')
|
|
// If a <link rel="icon"> element already exists,
|
|
// change its href to the given link.
|
|
if ($favicon !== null) {
|
|
$favicon.href = link
|
|
// Otherwise, create a new element and append it to <head>.
|
|
} else {
|
|
$favicon = document.createElement("link")
|
|
$favicon.rel = "icon"
|
|
$favicon.href = link
|
|
document.head.appendChild($favicon)
|
|
}
|
|
}
|
|
|
|
// 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 = "<span class="blink">BEER TIME !</span>";
|
|
changeFavicon('/favicon/beer')
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|